网站开发前台后台,济南网站制作网站,东营优化网站,个人主页的制作介绍5种方法进行实现
1、锚点
使用锚点链接是一种简单的返回顶部的功能实现。
该实现主要在页面顶部放置一个指定名称的锚点链接#xff0c;然后在页面下方放置一个返回到该锚点的链接#xff0c;用户点击该链接即可返回到该锚点所在的顶部位置。
body stylehe…介绍5种方法进行实现
1、锚点
使用锚点链接是一种简单的返回顶部的功能实现。
该实现主要在页面顶部放置一个指定名称的锚点链接然后在页面下方放置一个返回到该锚点的链接用户点击该链接即可返回到该锚点所在的顶部位置。
body styleheight:2000px;div idtopAnchor/diva href#topAnchor styleposition:fixed;right:0;bottom:0回到顶部/a/body2、scrollTop
scrollTop属性表示被隐藏在内容区域上方的像素数。
元素未滚动时scrollTop的值为0如果元素被垂直滚动了scrollTop的值大于0且表示元素上方不可见内容的像素宽度
由于scrollTop是可写的可以利用scrollTop来实现回到顶部的功能
body styleheight:2000px;button idtest styleposition:fixed;right:0;bottom:0回到顶部/buttonscripttest.onclick function(){document.body.scrollTop document.documentElement.scrollTop 0;}/script/body3、scrollTo
scrollTo(x,y)方法滚动当前window中显示的文档让文档中由坐标x和y指定的点位于显示区域的左上角
设置scrollTo(0,0)可以实现回到顶部的效果
body styleheight:2000px;button idtest styleposition:fixed;right:0;bottom:0回到顶部/buttonscripttest.onclick function(){scrollTo(0,0);}/script/body4、scrollBy()
scrollBy(x,y)方法滚动当前window中显示的文档x和y指定滚动的相对量
只要把当前页面的滚动长度作为参数逆向滚动则可以实现回到顶部的效果
body styleheight:2000px;button idtest styleposition:fixed;right:0;bottom:0回到顶部/buttonscripttest.onclick function(){var top document.body.scrollTop || document.documentElement.scrollTopscrollBy(0,-top);}/script/body5、scrollIntoView()
Element.scrollIntoView方法滚动当前元素进入浏览器的可见区域
该方法可以接受一个布尔值作为参数。如果为true表示元素的顶部与当前区域的可见部分的顶部对齐前提是当前区域可滚动如果为false表示元素的底部与当前区域的可见部分的尾部对齐前提是当前区域可滚动。如果没有提供该参数默认为true
使用该方法的原理与使用锚点的原理类似在页面最上方设置目标元素当页面滚动时目标元素被滚动到页面区域以外点击回到顶部按钮使目标元素重新回到原来位置则达到预期效果
body styleheight:2000px;div idtarget/divbutton idtest styleposition:fixed;right:0;bottom:0回到顶部/buttonscripttest.onclick function(){target.scrollIntoView();}/script/body
