时间戳

首页 > 技术文章 > 关于top按钮的网页设置

关于top按钮的网页设置

laogai 2013-11-01 16:03 原文

方法一：

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

 1 HTMl:
 2 
 3 <a id="return-top" href="#top">
 4     <span class="pointer"></span>
 5     <p class="black-circle">TOP</p>
 6 </a>
 7 
 8 
 9 CSS:
10 
11 #return-top{
12     width:51px;
13     height:51px;
14     position:fixed;
15     right:0;
16     bottom:0;
17     z-index: 100;
18     border-radius: 51px;
19     background: #424243;
20 
21 }
22 .pointer{
23     display: inline-block;
24     background: url(../img/icon_backtotop.png) no-repeat top center;
25     width:21px;
26     height:13px;
27     position: relative;
28     top:16px;
29     left:15px;
30 }
31 .black-circle{

32     color:#fff;
33     text-align: center;
34     width:51px;
35     font-size: 12px;
36     height:12px;
37     margin-top:15px;
38 }
39 #return-top:hover  .pointer{
40    top:10px;
41 }


方法二：在方法一的基础之上加缓冲效果，即添加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 两大文件。

 1 window.addEvent('domready',function() {
 2          new SmoothScroll({duration:700});
 3          /* go to top */
 4          var go = $('gototop');
 5          go.set('opacity','0').setStyle('display','block');
 6  window.addEvent('scroll',function(e) {
 7          if(Browser.Engine.trident4) {
 8                   go.setStyles({
 9                           'position': 'absolute',
10                           'bottom': window.getPosition().y + 10,
11                           'width': 100
12                   });
13                  }
14                  go.fade((window.getScroll().y > 300) ? 'in' : 'out')
15          });
16  });

demo测试地址

 

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

The MooTools JavaScript :

 1 /**
 2 * back-to-top: unobtrusive global 'back to top' link using mootools 1.2.x 
 3 * This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.
 4 *   http://creativecommons.org/licenses/by-sa/3.0/
 5 */
 6 
 7 // hide the effect from IE6, better not having it at all than being choppy.
 8 if (!Browser.Engine.trident4) {
 9   // 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.
10   window.addEvent((Browser.Engine.trident ? 'load' : 'domready'), function(){
11     var target_opacity = 0.64;
12     new Element('span', {
13       'id': 'back-to-top', 
14       'styles': {
15         opacity: target_opacity,
16         display: 'none',
17         position: 'fixed',
18         bottom: 0,
19         right: 0,
20         cursor: 'pointer'
21       },
22       'text': 'back to top',
23       'tween': {
24         duration: 200,
25         onComplete: function(el) { if (el.get('opacity') == 0) el.setStyle('display', 'none')}
26       },
27       'events': {'click': function() {
28                   /*location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用 location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如 http://ued.alimama.com#admin的location.hash=#admin,利用这个属性值可以实现很多效果。*/
29         if (window.location.hash) { window.location.hash = '#top'; } 
30         else { window.scrollTo(0, 0);/*把窗口内容滚动到指定的坐标。*/ }
31       }}
32     }).inject(document.body);
33 
34     window.addEvent('scroll', function() {
35       var visible = window.getScroll().y > (window.getSize().y * 0.8);
36       if (visible == arguments.callee.prototype.last_state) return;
37 
38       // fade if supported
39       if (Fx && Fx.Tween) {
40         if (visible) $('back-to-top').fade('hide').setStyle('display', 'inline').fade(target_opacity);
41         else $('back-to-top').fade('out');
42       } else {
43         $('back-to-top').setStyle('display', (visible ? 'inline' : 'none'));
44       }
45 
46       arguments.callee.prototype.last_state = visible
47     });
48   });
49 }

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

 

 1 //plugin
 2 jQuery.fn.topLink = function(settings) {
 3         settings = jQuery.extend({
 4                 min: 1,
 5                 fadeSpeed: 200
 6         }, settings);
 7         return this.each(function() {
 8                 //listen for scroll
 9                 var el = $(this);
10                 el.hide(); //in case the user forgot
11                 $(window).scroll(function() {
12                         if($(window).scrollTop() >= settings.min)
13                         {
14                                 el.fadeIn(settings.fadeSpeed);
15                         }
16                         else
17                         {
18                                 el.fadeOut(settings.fadeSpeed);
19                         }
20                 });
21         });
22 };
23 
24 //usage w/ smoothscroll
25 $(document).ready(function() {
26         //set the link
27         $('#gototop').topLink({
28                 min: 400,
29                 fadeSpeed: 500
30         });
31         //smoothscroll
32         $('#gototop').click(function(e) {
33                 e.preventDefault();
34                 $.scrollTo(0,300);
35         });
36 });

demo测试地址

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

 1 //plugin
 2     jQuery.fn.topLink = function(settings) {
 3 settings = jQuery.extend({
 4 min: 1, fadeSpeed: 200,
 5 ieOffset: 50
 6 }, settings);
 7 return this.each(function() {
 8 //listen for scroll
 9 var el = $(this);
10 el.css('display','none'); //in case the user forgot
11 $(window).scroll(function() {
12 //stupid IE hack
13 if(!jQuery.support.hrefNormalized) {
14 el.css({
15 'position': 'absolute',
16 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
17 });
18 }
19 if($(window).scrollTop() >= settings.min)
20 {
21 el.fadeIn(settings.fadeSpeed);
22 }
23 else
24 {
25 el.fadeOut(settings.fadeSpeed);
26 }
27 });
28 });
29 };
30 
31 
32 $(document).ready(function() {
33 $('#gototop').topLink({
34 min: 400,
35 fadeSpeed: 500
36     });
37 //smoothscroll
38 $('#gototop').click(function(e) {
39 e.preventDefault();
40 $.scrollTo(0,300);
41 });
42 });

 

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

 

 

 

 

 

 

 

 

 

推荐阅读