一个简单的返回顶部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代码为:可以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(); }); } });
相关推荐
hhanbj 2020-11-17
81427005 2020-11-11
nmgxzm00 2020-11-10
ifconfig 2020-10-14
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22