Home >Web Front-end >Bootstrap Tutorial >How to set the page back to top hover prompt in bootstrap
How to set the page back to top hover prompt in bootstrap
- 尚Original
- 2019-07-27 16:12:354883browse
Bootstrap settings page returns to the top hover prompt method as follows:
1. First add a "return to the top" button in the body
<body> <div class="go-top"> <div class="arrow"></div> <div class="stick"></div> </div> </body>
2. Definition of css
div .go-top {
display: none;
opacity: 0.6;
z-index: 999999;
position: fixed;
bottom: 113px;
left: 90%;
margin-left: 40px;
border: 1px solid #a38a54;
width: 38px;
height: 38px;
background-color: #eddec2;
border-radius: 3px;
cursor: pointer;
}
div .go-top:hover {
opacity: 1;
filter: alpha(opacity=100);
}
div .go-top div .arrow {
position: absolute;
left: 10px;
top: -1px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #cc3333;
}
div .go-top div .stick {
position: absolute;
left: 15px;
top: 15px;
width: 8px;
height: 14px;
display: block;
background-color: #cc3333;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}Use fixed positioning so that the button always appears in the lower right corner. By setting left:90%, the button can appear on the right without being too tight. Attach scroll bars.
3. The button is invisible by default. When the page is scrolled to a certain height, the button appears
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 1000)
$('div.go-top').show();
else
$('div.go-top').hide();
});
$('div.go-top').click(function() {
$('html, body').animate({scrollTop: 0}, 1000);
});
}); Recommendation: bootstrap introductory tutorial
The above is the detailed content of How to set the page back to top hover prompt in bootstrap. For more information, please follow other related articles on the PHP Chinese website!