jQuery 返回顶部代码分享 - 未分类

jQuery 返回顶部代码分享

发布于 2018-01-16 字数 1983 浏览 1541 评论 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);
});

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论