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

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

本文演示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代码

最新推荐

本周排行