php中页面平滑回到顶部代码,返回到网页顶部代码三人行：javascript平滑滚动+jquery回到顶部＋jquery滑动过度效果...

古老版html一行链接返回顶部

上古时代的互联网，返回顶部代码就是html中的一行a标签。如下：返回顶部

然到了如今这个强调动效和交互体验的前端发达时代，如果点击上边这个返回顶部，蹭的一下就直接跳到顶部，那显得有点儿太生硬和直接了，有没有用户体验更好一点儿的返回顶部代码呢？

当然是有。要不javascript与jquery哪来的用武之地。

纯javascript 平滑滚动到页面顶部

html:

Back to Top ↑

javascript:var timeOut;

function scrollToTop() {

if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){

window.scrollBy(0,-50);

timeOut=setTimeout('scrollToTop()',10);

}

else clearTimeout(timeOut);

}

jquery回到页面顶部(自动显示或隐藏)代码

此外嘛，就是用jquery来搞定。以下是一个示例。

html:

返回顶部

jquery:

$(document).ready(function(e) {

//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

$(function () {

$(window).scroll(function(){

if ($(window).scrollTop()>100){ //大于100行才出现跳转箭头

$("#top").fadeIn(1500);  //大于1500行时跳转箭头慢慢透明显示

}

else

{

$("#top").fadeOut(1500);  //大于1500行时跳转箭头慢慢透明消失

}

});

//当点击跳转链接后，回到页面顶部位置

$("#top").click(function(){

$('body,html').animate({scrollTop:0},1000);//1s完成回到顶部

return false;

});

});

});

jQuery“返回顶部”滑动过度效果

利用jQuery，直接在网站底部文件加代码： 返 回 顶 部 

CSS代码，使用了fixed让对象固定于浏览器窗口：#top{position:fixed;bottom:0;right:10px;}

调用jquery.js文件：

jQuery代码，注意正常使用的几个条件：$('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

当然，还有其它更有趣、好玩、实用的返回顶部代码，前端无秘密，只要发现别的网站有更漂亮的、新颖的，直接扒下来就好。 不会扒，那就去好好学习javascript和jquery吧，至少得入门！

本文链接：肖运华 » 网站策划设计制作优化 » 返回到网页顶部代码三人行：javascript平滑滚动+jquery回到顶部＋jquery滑动过度效果

转载请注明：http://www.xiaoyunhua.com/2248.html