html锚点怎么返回顶部,滑动效果的返回顶部锚点按钮

‘TOP’置顶链接，说的通俗一点就是‘返回顶部的链接’，‘go to top

’一般都放在页面的底部，它可以快速返回页面顶部，以节省用户浏览页面的时间。 它主要的应用场景是

当你有一个很长的网页内容时，您通常要 把 ‘TOP’锚点链接 添加在页面底部，只要用户一点击‘TOP’链接

,就可以马上回到页面的顶部了。

我们遇到的问题是：不是滚动到页面底部的时候才看到了‘TOP’,如果页面内容超过两屏以上时，用户有些心烦，我不想看了，我想回到顶部看一些其他的内容。

如果我们只看了第一屏的文章，不想看了，可是‘TOP’在第二屏才会出现。

这时候有三种情况发生：

发挥鼠标特长就是拖动浏览器的滚动条或是滚动鼠标滑轮，回到页面顶部。

继续硬着头皮往下看，看有没有‘TOP’,幸运的话，马上找到了，可以回到顶部了。(一般人心中是没有‘TOP’概念的，只有选择1

和3 的方法了)

直接关闭网页，或者重新打开网站，或者离开网站。

我想我们已经找到了问题的所在了。

我们有三种方案可以给用户带来良好的用户体验：

方案一：在合适的地方，手动加入一个或多个‘TOP’链接。

这是最原始的做法了，如果滚动太快，验，那就是我们给用户用脚本实现一下缓冲效果，而不是直接飙到顶部。

The HTML :

false;">Top of

Page

The JavaScript :

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);

}

}

方案二：‘TOP’默认是隐藏的，只要滚动条，滚动到一定高度时就显示，否则就隐藏。

这样我可能想从中间某处回到页面的顶部成为可能。

The HTML :

Top

of Page

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});

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')

});

});

还有一个例子是动态生成‘TOP’。

The MooTools JavaScript :

// 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() {

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 :

//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);

});

});

注意：

Please note that this version doesn’t work with Internet Explorer

due to IE’s lack of CSS “position:fixed” support. Here is a shotty

attempt at IE support:

//plugin

jQuery.fn.topLink=function(settings){

settings=jQuery.extend({

min:1,fadeSpeed:200,

ieOffset:50

},settings);

returnthis.each(function(){

//listen for

scroll

varel=$(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);

});

});