返回顶部：js代码篇

最新推荐文章于 2024-03-19 10:15:00 发布

草巾冒小子

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量461

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文为优快云博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.youkuaiyun.com/qq_35393869/article/details/97039980

JavaScript 专栏收录该内容

70 篇文章

订阅专栏

代码篇：

地址：jQuery scroll()方法：页面滚动到一定位置触发事件返回顶部
我们监听滚动事件，放滚动到 400px 时，出发显示返回顶部标签，然后给该标签，绑定一个事件，点击返回顶部。

HTML部分：

<span href="" class="goTop">返回顶部</span>

CSS部分：


body{
    height: 2000px;
}
.goTop{
    position: fixed;
    right: 50px;
    bottom: 100px;
    display: none;
}

JS部分：

<script>
    $(function() {
        $(window).scroll(function() {
            var scroHei = $(window).scrollTop();//滚动的高度
            if (scroHei > 400) {
                $('.goTop').fadeIn();
            } else {
                $('.goTop').fadeOut();
            }
        })
        /*点击返回顶部*/
        $('.goTop').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 300);
        })
    })
</script>