关于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