当前位置:首页 > 开发 > Web前端 > Jquery > 正文

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

发表于: 2014-09-09   作者:agevs   来源:转载   浏览次数:
摘要: 本文演示jQuery返回顶部,当文章页比较长时间,可以方便用户返回网站的顶部,实现代码也不难,大家学习下!   调用代码: <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不
最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不
整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 第一种实现 一、JSP或
(function(){ var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop">
(function(){ var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop">
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/
css: .bottom_tools{ display:block; position:fixed; bottom:30px; right:20px;z-index: 999;} .b
插件描述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部。 使用方法非常简单 引
学了Jquery几天,今天突然兴致勃勃做一个JQuery的简单信息框的插件,可以替代alert和confirm对话框
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号