本文摘自PHP中文网,作者V,侵删。
背景:
现在的网站基本上都是长页面,多的有四五屏,少的话也有两三屏,页面太长有的时候为了提升用户体验,会在页面右边出现一个回到顶部的按钮,这样能快速回到顶部,以免在滑动页面出现视觉屏幕,回到顶部一般有四种方式。
1、通过锚链接回到顶部,需要将body加入一个名为top的标记
1 | <a href= "#top" target= "_self" >回到顶部</a>
|
2、通过JavaScript的scroll回到顶部,控制水平和垂直方向
1 | <a href= "javascript:scroll(0,0)" >JavaScript回到顶部<s/a>
|
3、通过JavaScript控制,缓慢向上滑动,不过不够平滑
1 | <a onclick= "goScrollTop()" >JavaScript缓慢向上滑动</a>
|
1 2 3 4 5 6 7 8 9 10 11 | function goScrollTop() {
//把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数)
//向上是负数,向下是正数
window.scrollBy( 0 , -100 );
//延时递归调用,模拟滚动向上效果
scrolldelay = setTimeout( 'goScrollTop()' , 100 );
//获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTop;因为二者只有一个会生效,另一个就恒为 0 ,所以取和值可以得到网页的真正的scrollTop值
var sTop = document.documentElement.scrollTop + document.body.scrollTop;
//判断当页面到达顶部,取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面)
if (sTop == 0 ) clearTimeout(scrolldelay);
}
|
阅读剩余部分
相关阅读 >>
css min-width属性怎么用
css font-size 不管用怎么办
css怎么实现文字横排
css如何设置图片轮廓
css column-rule-color属性怎么用
css里面有哪些选择器
css怎么改字体粗细
css如何设置不可点击
css writing-mode属性怎么用
sencss是什么?
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css实现快速回到顶部效果