- 返回顶部按钮固定在页面某个位置,当页面滑动超过600时,显示此按钮,可用jq的scrollTop()方法实现;
- 点击触发click事件,并返回到页面顶部,这里设置返回顶部的时间是1000ms(即1s),可用jq的animat()方法实现;
HTML:
<div class="backToTop">
<img src="img/index/fanhui_top.png" />
</div>
CSS:
/*返回顶部*/
.backToTop{
position: fixed;
bottom: 55px;
right: 0;
}
.backToTop:hover{
cursor: pointer;
}
JS:
<script type="text/javascript">
$(function() {
// 当页面向下滑动 600px 出现"返回顶部" 按钮
$(window).scroll(function() {
if($(window).scrollTop() > 600) {
$('.backToTop').css('display', 'block');
} else {
$('.backToTop').css('display', 'none');
}
});
// 点击按钮,返回页面顶部
$(".backToTop").on("click", function() {
$("html").animate({
scrollTop: 0
}, 1000)
})
});
</script>
jq可在此下载:https://www.jb51.net/zt/jquerydown.htm
如有错误或不足,欢迎各位大佬评论指正。