码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-01-05 11:13:54      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:

本文演示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://blog.csdn.net/luckyboyguo/article/details/42419061

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!