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

标签：jquery   ui   web前端   前端   框架   

本文演示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代码为：可以500%提高开发效率的前端UI框架！

//返回顶部
$(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代码

标签：jquery   ui   web前端   前端   框架   

原文地址：http://blog.csdn.net/ariss123/article/details/39156251