返回顶部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("/images/common/gotop.jpg") center center;
        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


感谢你的阅读,本文由 前端汇 版权所有。
如若转载,请注明出处:前端汇(https://statics.jsout.com/page/175.html)