#科技进步#时间永远是自己的

返回顶部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交流学习社区,欢迎与我聊天,问我问题哦!