返回顶部的js实现(jQuery/MooTools)

<p>返回顶部的js实现(jQuery/MooTools)</p> <p>一、、jQuery下的返回顶部功能</p> <p>您可以狠狠地点击这里:jQuery下的返回顶部demo</p> <p>可以看到,如果页面有滚动高度,右下角就会有一个含有&ldquo;返回顶部&rdquo;字样的黑色背景半透明的小条条,如下图所示:</p> <p><br /> 点击这里&ldquo;返回顶部&rdquo;字样的按钮后,页面就像是抹了润滑剂一样,倏地一声就滑到顶部了,同时,该点击按钮也玩起了躲猫猫 &ndash; 不见了。</p> <p>实现的原理嘛,恩&hellip;&hellip;估计鲜有人关心,所以我也懒得浪费口水了,直接上代码。</p> <p>无论是这里的jQuery实现还是MooTools实现,下面的CSS代码都是一致的,如下:</p> <p>.backToTop {<br /> display: none;<br /> width: 18px;<br /> line-height: 1.2;<br /> padding: 5px 0;<br /> background-color: #000;<br /> color: #fff;<br /> font-size: 12px;<br /> text-align: center;<br /> position: fixed;<br /> _position: absolute;<br /> right: 10px;<br /> bottom: 100px;<br /> _bottom: &quot;auto&quot;;<br /> cursor: pointer;<br /> opacity: .6;<br /> filter: Alpha(opacity=60);<br /> }<br /> js相关代码如下:</p> <p>(function() {<br /> var $backToTopTxt = &quot;返回顶部&quot;, $backToTopEle = $(&#39;&lt;div class=&quot;backToTop&quot;&gt;&lt;/div&gt;&#39;).appendTo($(&quot;body&quot;))<br /> .text($backToTopTxt).attr(&quot;title&quot;, $backToTopTxt).click(function() {<br /> $(&quot;html, body&quot;).animate({ scrollTop: 0 }, 120);<br /> }), $backToTopFun = function() {<br /> var st = $(document).scrollTop(), winh = $(window).height();<br /> (st &gt; 0)? $backToTopEle.show(): $backToTopEle.hide();<br /> //IE6下的定位<br /> if (!window.XMLHttpRequest) {<br /> $backToTopEle.css(&quot;top&quot;, st + winh - 166);<br /> }<br /> };<br /> $(window).bind(&quot;scroll&quot;, $backToTopFun);<br /> $(function() { $backToTopFun(); });<br /> })();</p> <p><br /> </p> <p>二、MooTools下返回顶部功能实现</p> <p>您可以狠狠地点击这里:MooTools下的返回顶部demo</p> <p>demo页面的效果与上面jQuery demo下效果基本一致。</p> <p>代码部分。CSS代码完全同上。JS代码如下:</p> <p>(function() {<br /> var $backToTopTxt = &quot;返回顶部&quot;, $backToTopEle = new Element(&quot;div&quot;, {<br /> &quot;class&quot;: &quot;backToTop&quot;,<br /> title: $backToTopTxt<br /> }).set(&quot;text&quot;, $backToTopTxt).addEvent(&quot;click&quot;, function() {<br /> var st = document.getScroll().y, speed = st / 6;<br /> var funScroll = function() {<br /> st -= speed;<br /> if (st &lt;= 0) { st = 0; }<br /> window.scrollTo(0, st);<br /> if (st &gt; 0) { setTimeout(funScroll, 20); }<br /> };<br /> funScroll();<br /> }).inject(document.body), $backToTopFun = function() {<br /> var st = document.getScroll().y, winh = window.getSize().y;<br /> (st &gt; 0)? $backToTopEle.setStyle(&quot;display&quot;, &quot;block&quot;): $backToTopEle.setStyle(&quot;display&quot;, &quot;none&quot;);<br /> //IE6下的定位<br /> if (!window.XMLHttpRequest) {<br /> $backToTopEle.setStyle(&quot;top&quot;, st + winh - 166);<br /> }<br /> };<br /> window.addEvents({<br /> scroll: $backToTopFun,<br /> domready: $backToTopFun<br /> });<br /> })();<br /> 直接拷贝上面的代码在您的JS代码中就轻松实现效果啦。<br /> MooTools的动画方法Fx不支持滚动,要实现滚动条的平滑滚动效果需要使用Fx.Scroll插件。但是,显然, 这里的简单功能没有必要再使用额外的插件,所以直接设置了个定时器实现了平滑滚动效果。<br /> 注:demo页面中的美女图片作用是撑开页面高度使产生滚动条。</p>
RangeTime:0.005320s
RangeMem:197.88 KB
返回顶部 留言