关于top按钮的网页设置

方法一：

直接用html实现，没有缓冲的效果，直接彪到顶部。

 HTMl:

 <a id="return-top" href="#top">
     <span class="pointer"></span>
     <p class="black-circle">TOP</p>
 </a>

 CSS:

 #return-top{
     width:51px;
     height:51px;
     position:fixed;
     right:0;
     bottom:0;
     z-index: 100;
     border-radius: 51px;
     background: #424243;

 }
 .pointer{
     display: inline-block;
     background: url(../img/icon_backtotop.png) no-repeat top center;
     width:21px;
     height:13px;
     position: relative;
     top:16px;
     left:15px;
 }
 .black-circle{

     color:#fff;
     text-align: center;
     width:51px;
     font-size: 12px;
     height:12px;
     margin-top:15px;
 }
 #return-top:hover  .pointer{
    top:10px;
 }

方法二：在方法一的基础之上加缓冲效果，即添加js实现

js代码如下：

/**
 * 作者：我是UED ，http://www.iamued.com/qianduan/816.html
 * 回到页面顶部
 * @param acceleration 加速度
 * @param time 时间间隔 (毫秒)
 **/
function goTop(acceleration, time) {
    acceleration = acceleration || 0.1;
    time = time || 16;

    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 0;
    var x3 = 0;
    var y3 = 0;

    if (document.documentElement) {
        x1 = document.documentElement.scrollLeft || 0;
        y1 = document.documentElement.scrollTop || 0;
    }
    if (document.body) {
        x2 = document.body.scrollLeft || 0;
        y2 = document.body.scrollTop || 0;
    }
    var x3 = window.scrollX || 0;
    var y3 = window.scrollY || 0;

    // 滚动条到页面顶部的水平距离
    var x = Math.max(x1, Math.max(x2, x3));
    // 滚动条到页面顶部的垂直距离
    var y = Math.max(y1, Math.max(y2, y3));

    // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
    var speed = 1 + acceleration;
    window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

    // 如果距离不为零, 继续调用迭代本函数
    if(x > 0 || y > 0) {
        var invokeFunction = goTop( +acceleration+ , +time+  );
        window.setTimeout(invokeFunction, time);
    }
}

demo测试地址

方法三：‘TOP’默认是隐藏的，只要滚动条，滚动到一定高度时就显示，否则就隐藏。
这样我可能想从中间某处回到页面的顶部成为可能。

The HTML :

<a href=#top id=gototop >Top of Page</a>

The CSS :

#gototop { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; } #gototop { text-decoration:underline; }

The MooTools JavaScript : 注意： 我们需要MooTools Core 库的同时，也需要MooTools More 库中的 Fx.Scroll.js 和 Fx.SmoothScroll.js 两大文件。

 window.addEvent('domready',function() {
          new SmoothScroll({duration:700});
          /* go to top */
          var go = $('gototop');
          go.set('opacity','0').setStyle('display','block');
  window.addEvent('scroll',function(e) {
          if(Browser.Engine.trident4) {
                   go.setStyles({
                           'position': 'absolute',
                           'bottom': window.getPosition().y + 10,
                           'width': 100
                   });
                  }
                  go.fade((window.getScroll().y > 300) ? 'in' : 'out')
          });
  });

demo测试地址

方法3：还有一个例子是动态生成‘TOP’。

The MooTools JavaScript :

 /**
 * back-to-top: unobtrusive global 'back to top' link using mootools 1.2.x
 * This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.
 *   http://creativecommons.org/licenses/by-sa/3.0/
 */

 // hide the effect from IE6, better not having it at all than being choppy.
 if (!Browser.Engine.trident4) {
   // element added onload for IE to avoid the operation aborted bug. not yet verified for IE8 as it's still on beta as of this modification.
   window.addEvent((Browser.Engine.trident ? 'load' : 'domready'), function(){
     var target_opacity = 0.64;
     new Element('span', {
       'id': 'back-to-top',
       'styles': {
         opacity: target_opacity,
         display: 'none',
         position: 'fixed',
         bottom: 0,
         right: 0,
         cursor: 'pointer'
       },
       'text': 'back to top',
       'tween': {
         duration: 200,
         onComplete: function(el) { if (el.get('opacity') == 0) el.setStyle('display', 'none')}
       },
       'events': {'click': function() {
                   /*location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用 location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如 http://ued.alimama.com#admin的location.hash=#admin,利用这个属性值可以实现很多效果。*/
         if (window.location.hash) { window.location.hash = '#top'; }
         else { window.scrollTo(0, 0);/*把窗口内容滚动到指定的坐标。*/ }
       }}
     }).inject(document.body);

     window.addEvent('scroll', function() {
       var visible = window.getScroll().y > (window.getSize().y * 0.8);
       if (visible == arguments.callee.prototype.last_state) return;

       // fade if supported
       if (Fx && Fx.Tween) {
         if (visible) $('back-to-top').fade('hide').setStyle('display', 'inline').fade(target_opacity);
         else $('back-to-top').fade('out');
       } else {
         $('back-to-top').setStyle('display', (visible ? 'inline' : 'none'));
       }

       arguments.callee.prototype.last_state = visible
     });
   });
 }

The jQuery JavaScript :
需要jQuery’s ScrollTo plugin 插件添加一些平滑的锚。

 //plugin
 jQuery.fn.topLink = function(settings) {
         settings = jQuery.extend({
                 min: 1,
                 fadeSpeed: 200
         }, settings);
         return this.each(function() {
                 //listen for scroll
                 var el = $(this);
                 el.hide(); //in case the user forgot
                 $(window).scroll(function() {
                         if($(window).scrollTop() >= settings.min)
                         {
                                 el.fadeIn(settings.fadeSpeed);
                         }
                         else
                         {
                                 el.fadeOut(settings.fadeSpeed);
                         }
                 });
         });
 };

 //usage w/ smoothscroll
 $(document).ready(function() {
         //set the link
         $('#gototop').topLink({
                 min: 400,
                 fadeSpeed: 500
         });
         //smoothscroll
         $('#gototop').click(function(e) {
                 e.preventDefault();
                 $.scrollTo(0,300);
         });
 });

demo测试地址

以上代码针对ie7不使用，针对ie7代码如下：

 //plugin
     jQuery.fn.topLink = function(settings) {
 settings = jQuery.extend({
 min: 1, fadeSpeed: 200,
 ieOffset: 50
 }, settings);
 return this.each(function() {
 //listen for scroll
 var el = $(this);
 el.css('display','none'); //in case the user forgot
 $(window).scroll(function() {
 //stupid IE hack
 if(!jQuery.support.hrefNormalized) {
 el.css({
 'position': 'absolute',
 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
 });
 }
 if($(window).scrollTop() >= settings.min)
 {
 el.fadeIn(settings.fadeSpeed);
 }
 else
 {
 el.fadeOut(settings.fadeSpeed);
 }
 });
 });
 };

 $(document).ready(function() {
 $('#gototop').topLink({
 min: 400,
 fadeSpeed: 500
     });
 //smoothscroll
 $('#gototop').click(function(e) {
 e.preventDefault();
 $.scrollTo(0,300);
 });
 });

文章转载地址为：http://www.missyuan.com/viewthread.php?tid=450821