一个简单的返回顶部jQuery代码

浏览数：35 / 时间：2015年06月09日

本文演示jQuery返回顶部，当文章页比较长时间，可以方便用户返回网站的顶部，实现代码也不难，大家学习下！

jQuery返回顶部

调用代码：

<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script language="javascript" type="text/javascript" src="scrollSilde.js"></script> 
<script language="javascript" type="text/javascript" > 
    $(function () { 
        $(window).gotoTop({ 
            showHeight: 150, //设置滚动高度时显示 
            speed: 200 //返回顶部的速度以毫秒为单位 
        }); 
    }); 
</script>

其中scrollSilde.js代码为：

//返回顶部

$(function () { 
    $.fn.gotoTop = function (options) { 
        var defaults = { 
            showHeight: 150, 
            speed: 1000 
        }; 
        var options = $.extend(defaults, options); 
        $(document.body).prepend("<div id='totop'><a></a><p></p></div>"); 
        var $toTop = $(this); 
        var $top = $("#totop"); 
        var $ta = $("#totop a"); 
        var $bt = $("#totop p"); 
        $toTop.scroll(function () { 
            var scrolltop = $(this).scrollTop(); 
            if (scrolltop >= options.showHeight) { 
                $top.show(); 
            } 
            else { 
                $top.hide(); 
            } 
        }); 
        $ta.click(function () { 
            $("html,body").animate({ scrollTop: 0 }, options.speed); 
        }); 
        $bt.click(function () { 
            $("#mess").show(); 
        }); 
    } 
});

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

一个简单的返回顶部jQuery代码