JQ实现简单的返回顶部功能
在日常的网站开发中,返回顶部是一个常用的功能.下边我用一些简单的案例来实现他
需求:在滚动超过一定距离后,出现返回顶部按钮,点击按钮,当前页面返回顶部
注意:返回顶部时,要流畅有一定的过渡效果.不能太生硬;
开发的时候,为了凸显效果 顺便做了一个简单的标题…
<div class="container">
<div class="Nav_header">
<ul>
<li>
主菜单
</li>
<li>
今日新闻
</li>
<li>
明日新闻
</li>
<li>
新曲鉴赏
</li>
<li>
KMV展示
</li>
</ul>
</div>
<div class="top_btn">
<span class="icon-ok">⬆</span>
<span>返回顶部</span>
</div>
<div class="item"></div>
<div class="item"></div>
</div>
css部分
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
padding: 0;
}
.container {
width: 100%;
background-color: #333333;
padding-top: 50px;
z-index: 9999;
}
.container .Nav_header {
position: fixed;
color: #fff;
background-color: #666;
font-size: 20px;
top: 0;
left: 100px;
}
.container .Nav_header ul li {
display: inline-block;
padding: 5px 10px;
cursor: pointer;
}
.container .Nav_header ul li:hover {
color: pink;
}
.container .Nav_header ul li::after {
content: "|";
color: #ccc;
margin-left: 18px;
height: 5px;
overflow: hidden;
}
.container .Nav_header ul li:last-child::after {
content: "";
margin-left: 0;
}
.container .top_btn {
display: none;
position: fixed;
right: 30px;
bottom: 100px;
color: #181bce;
background-color: #ccc;
border-radius: 3px;
cursor: pointer;
}
.container .top_btn span {
padding: 10px 5px;
}
.container .top_btn span:last-child {
padding-left: 0;
}
.container .item {
height: 1000px;
width: 100%;
background-color: turquoise;
}
.container .item:nth-child(2n) {
background-color: palevioletred;
}
逻辑部分
$(function () {
function goTop(){
var $navBar = $(".container");
// window.scroll 滚动监听 为了显示隐藏 返回按钮
$(window).scroll(function () {
//写在函数内部一直滚动监听 写在外部时,由于js读取是从上往下执行的 .先获取当前的滚动高度为0,再执行滚动监听的
// 获取滚动的高度 浏览器兼容
let $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.html.scrollTop;
if ($scrollTop > 50) {
$navBar.find(".top_btn").show();
} else {
$navBar.find('.top_btn').hide();
}
});
// 返回事件
$navBar.find(".top_btn").on("click", function () {
// $('html,body').animate({scrollTop: '0'}, 500);
$("html,body").animate({
scrollTop:0
});
});
}
goTop();
})