李涛自留地
回到顶部
首页 > jQuery学习 > jQuery回到顶部实例代码 jQuery怎么实现回到顶部

jQuery回到顶部实例代码 jQuery怎么实现回到顶部

文章目录

原来本站使用的回到顶部特效是在百度统计的应用中直接添加的，当时也没自己做这个功能，后来百度统计在应用中下线了这个回到顶部特效功能，一直也没有自己做一个，今天抽空参考别人的案例，用jQuery实现了页面向下滚动回到顶部的特效。

jQuery回到顶部Css代码

        .top {
            width: 35px;
            height: 35px;
            position: fixed;
            right: 10px;
            bottom: 10px;
            padding-top: 3px;
            font-size: 12px;
            text-align: center;
            color: #fff;
            background-color: #9C9;
        }

在Css代码中最主要的就是需要设置position: fixed;为固定定位，然后让它距离右边和底部各10px。

jQuery回到顶部Html代码

<div class="top"><span>回到<span><span>顶部</span></div>

通常回到顶部的Html代码是加载在标签下面。

jQuery回到顶部Js代码

<script>
    $(function() {
        // 先隐藏回到顶部按钮
        $(".top").hide();

        $(window).scroll(function() {
            // 判断scrollTop的兼容
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // 判断滚动的距离
            if (scrollTop > 150) {
                // 大于150显示回到顶部按钮
                $(".top").show();
            } else {
                // 否则隐藏按钮
                $(".top").hide();
            }
        })
        $(".top").click(function() {
            // 调用jq的animate函数实现动画效果
            $('html,body').animate({
                scrollTop: 0
            }, 1000);
        })
    })
</script>

回到顶部Js代码一般是放置在网站模板的footer模板中或者是</body>前，需要实现回到顶部Js代码正常生效，就必须在网站模板的<head>与</head>加载jQuery文件，否则回到顶部就不会生效，浏览器开发者工具中会报Js错误。

jQuery回到顶部示意图

本站在添加上以上代码后，实现的回到顶部的示意图：

jQuery回到顶部实例代码 jQuery怎么实现回到顶部

总的来说用jQuery实现了回到顶部的特效功能，但是在移动端访问的时候存在不能漂浮在最上面的问题，这还需要在Css中对回到顶部继续进行优化。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。