Jquery实现一键返回顶部

申霖

发布于 2019-12-27 17:39:20

1.7K00

代码可运行

文章被收录于专栏：小白程序猿小白程序猿

运行总次数：0

代码可运行

一、需求分析

当用户浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面返回顶部，用户再也不用滚动滚轮了。下面本站的返回顶部的效果，分享给大家：

二、示例代码

HTML代码：

<!-- Back to the top start -->
<div id="Back-to-the-top"><i class="layui-icon layui-icon-top"></i></div>
<!-- Back to the top end -->

CSS代码

#Back-to-the-top {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 50px;
    bottom: 25%;
    background-color: #FFF;
    cursor: pointer;
    display: none;
}

#Back-to-the-top .layui-icon {
    font-size: 50px;
    color: #333;
}

Jquery代码：

// 返回顶部
window.onscroll = function() {
    scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    $("#Back-to-the-top").css("display",(scrollTop >= 300) ? "block" : "none");
};
$("#Back-to-the-top").click(function(){
    var timer = setInterval(function() {
    window.scrollBy(0, -450);
    if (scrollTop == 0)
        clearInterval(timer);
    }, 50);
});

好文章记得分享哦！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-04-09，如有侵权请联系 cloudcommunity@tencent.com 删除

html