返回到网页顶部代码三人行:javascript平滑滚动+jquery回到顶部+jquery滑动过度效果

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

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

<a href="#top">返回顶部</a>

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

返回顶部代码

当然是有。要不javascriptjquery哪来的用武之地。

纯javascript 平滑滚动到页面顶部

html:

<body id="top">
<a href="#top" onclick="scrollToTop();return false">Back to Top &uarr;</a>

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:

<p id="top">

<a href="#top"><span></span>返回顶部</a>

</p>

jquery:

<script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>

<script>

$(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;

});

});




});

</script>

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

利用jQuery,直接在网站底部文件加代码:

<a href="#" id="top"> 返 回 顶 部 </a>

CSS代码,使用了fixed让对象固定于浏览器窗口:

#top{position:fixed;bottom:0;right:10px;}

调用jquery.js文件:

<script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>

jQuery代码,注意正常使用的几个条件:

$('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

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

这篇文章对俺有帮助,打赏犒劳下作者吧〜

本文链接:肖运华 » 网站策划设计制作优化 » 返回到网页顶部代码三人行:javascript平滑滚动+jquery回到顶部+jquery滑动过度效果
原创文章,转载请注明:http://www.xiaoyunhua.com/2248.html

发表评论

电子邮件地址不会被公开。