jQuery 返回顶部代码分享

发布于 2018-01-16 13:15:45 字数 1672 浏览 1666 评论 0

返回顶部可以说是一个网站必备的功能,特别是很长的网页,方便用户能够一次性的返回导航条,而无需手动滑动,这篇文章将给大家分享一个简单的返回顶部代码。

jQuery 返回顶部代码分享

示例地址:http://run.wenjiangs.com/code/#/?code=enSxkp25

返回顶部代码其实很简单,我们使用 jQuery 的自定义动画就能做出一定的缓冲效果,比起直接跳转,看起来更适合网页的展现,首先我们需要一个返回顶部的按钮,比如下面的 HTML 代码:

<div class="backtop" title="回到顶部">TOP</div>

我们添加一点样式:

.backtop{
    position:fixed;
    right:30px;
    bottom:-50px;
    width:40px;
    height:40px;
    line-height:30px;
    font-size:12px;
    color:#FFF;
    text-align:center;
    cursor:pointer;
    background-color:#333;
    border-radius:6px 6px 0 0;
    box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
}

当鼠标移动到按钮上面的时候,我们改变其背景颜色:

.backtop:hover {
    background-color:#21d2af;
}

好了基本的样式我们就编写完成了,接下来我们来看看 JavaScript 代码。

首先返回顶部的按钮并不是一开始就显示的,我们设置为当用户滑动网页 200px 的时候,才显示返回顶部的按钮:

$(window).scroll(function(){
    var y_height = document.documentElement.scrollTop + document.body.scrollTop;
    //兼容ie:document.documentElement.scrollTop
    if(y_height > 200){
        $(".backtop").stop().animate({bottom:"-10px"},300);
        //当滚动鼠标大于200px时出现
    }else{
        $(".backtop").stop().animate({bottom:"-50px"},300);
        //当小于200px时不出现
    }
});

当用户点击按钮的时候,我们返回顶部:

$(".backtop").click(function(){
    $("html, body").animate({scrollTop:"0px"}, 300);
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。