#每天都是崭新的一天#再累也要照顾好自己

返回顶部javascript完整代码(基于jquery)

背景:

文章长了页面拉到底部再拖回到顶部,会显得很麻烦,也很臃肿。加个“返回顶部”按钮就不一样了。

需求:

返回顶部按钮, 点击后平滑过渡到顶部; 自动判断浏览器窗口,自动隐藏

首先在html里引入jquery

<script src="<%=_web.url%>static/src/js/widget/jquery/jquery-1.9.1.min.js"></script>

在页面通用部分( footer.html )添加页面元素:

<a id="back-top" class="w-gotop" href="javascript:void(0)"></a>

再添加并调整一下css显示样式:

<style>
    #back-top{
        width:50px;
        height:42px;
        display:block;
        background:url("https://www.mwcxs.top/static/theme/liblog/res/css/business/index/images/ic_top_r.png") center center no-repeat;
position: fixed; right: 20px; bottom: 200px; display: none; } </style>

这样按钮就能正常显示在页面的右下角了,最后添加javascript代码:

    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    $("#back-top").on("click",function(){$("html,body").animate({scrollTop:"0"})})

如此,一个简单的返回到顶部的功能就完成了。O(∩_∩)O


感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/175.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

微信群
欢迎加入微信群
微信公众号
欢迎关注微信公众号

图文推荐

微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!
您正在使用的浏览器是,不在支持范围内!
为了您的正常使用与展示,推荐使用Chrome浏览器68以上版本
支持浏览器:
火狐浏览器最新版
Safari浏览器最新版
Edge浏览器最新版
IE浏览器10,11