KLong 2014-09-09
本文演示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(); }); } });