当前位置:jQuery学习 > jQuery > 一个简单的返回顶部jQuery代码

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

时间:2014-05-27QQ群:116983258

本文演示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学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-go-to-top.html

大家说了些什么

  1. 1. 乌仁 2014-11-26 16:03

    请把代码给我传一下好吗,谢谢咯

    • 东奎 2014-11-26 21:59

      @ 代码都贴出来了,还要神马

  2. 2. youke 2015-01-22 11:36

    插件太麻烦 ,直接下面的代码就好了

    <code>$(window).scroll(function(){
    		var heiScorll = $(this).scrollTop();
    		if ( heiScorll>10 ){
    			$("#totop a").fadeIn();	
    		}else{
    			$("#totop a").fadeOut();	
    		}
    	});
    	
    	$("#totop a").click(function(){
    		$("body,html").animate({scrollTop:0},800);
    	});</code>

  3. 3. Yuxianjiazu 2015-03-30 22:47

    直接javascript:scrollTo(0,0);不是更好

所有话题