点击页面的“回到顶部”按钮，页面滚动到顶部的几种方法，以及设置 scrollTop问题

ゝ一世哀愁。 2022-12-24 14:54 485阅读 0赞

点击页面的“回到顶部”按钮，页面滚动到顶部的几种方法

一、使用锚点  
1）使用默认链接锚点，设置a链接的href属性值为"\#top"即可实现  
    <div><a href=" ">返回顶部</a ></div>

2）href指向特定的id  
<div id=“element1”>元素1</div>  
<a href=“\#element1”>回到元素1</a >

二、scrollTop属性:  
元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

document.body.scrollTop = document.documentElement.scrollTop = 0

三、scrollTo(0,0)方法: 参数为坐标点，（x,y）—坐标点  
坐标x和y指定的点位于显示区域的左上角

四、scrollBy(dx,dy)方法：参数为距离  dx—表示水平距离，dy-表示垂直距离  
var top = document.body.scrollTop || document.documentElement.scrollTop  
scrollBy(0,-top)

**HTML 控件的属性：offsetTop. offsetLeft.  offsetWidth.  offsetHeight**  
body不属于HTML控件

obj.offsetTop —指 obj 距离上方或上层控件（父级）的位置，整型，单位像素。  
obj.offsetLeft —-指 obj 距离左方或上层控件（父级）的位置，整型，单位像素。  
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素—包括边框、滚动条、可视区域  
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素—包括边框、滚动条、可视区域

**offsetTop与style.top、offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 的区别**

1）offsetTop 返回的是数字并且带px单位，而 style.top 返回的是字符串  
2）offsetTop 只读，而 style.top 可读写  
3）如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串

**clientHeight、clientWidth、clientLeft、clientTop—-body和HTMl控件都有该属性**

clientHeight——内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关，也就是除了滚动条的高度和边框的高度，剩下的高度就是可视区域的高度

clientWidth——内容可视区域的宽度  
clientLeft———-可认为为左边框的长度  
Clienttop--------可认为为上边框的长度

**scrollLeft、scrollTop、scrollHeight、scrollWidth**

scrollLeft————左边卷起来的宽度  
scrollTop-———-上边卷起来的高度  
scrollHeight———内部元素的绝对高度，包含内部元素的隐藏的部分  
scrollWidth———-内部元素的绝对宽度，包含内部元素的隐藏部分

1、可以设置元素滚动的效果：  
1）scrollLeft—设置/获取元素水平向右滚动的距离  
比如：页面有多个tab项，页面初始化成功，让其自动滚动到最后一个tab项，而最后一项超过页面最大宽度，被遮挡住了，这时候需要设置scrollLeft，达到滚动效果

获取视口元素的宽度：this.$refs.timeTab.offsetWidth  
保存每一个tab项相对于视口左边距离：  
position = 0  
给每一个tab项设置宽度：itemWidth  
for (let i = 0; i < this.dynamicTabList.length; i++) \{  
        this.offset\[i\] = (i - position) \* this.itemWidth  
      \}

当元素宽度超出容器宽度设置scrollLeft 的值才生效，否则一直为0

2）scrollTop—设置/获取元素向下滚动的距离  
当点击某个tab项，页面滚动到具体的content区域  
当元素高度超出视口高度的时候，设置scrollTop的值才生效，否则一直为0

当页面向下滚动到一定距离的时候，显示“回到顶部”文案，点击该文案，回到页面顶部

参考文章：[https://blog.csdn.net/zh\_rey/article/details/78967174][https_blog.csdn.net_zh_rey_article_details_78967174]

**栗子：页面初始化成功，让其自动定位到特定的tab项，利用scrollLeft实现水平方向滚动**

比如：tab状态有“已开抢，抢购中，即将开抢”

效果：页面初始化成功之后，自动滑动到“抢购中”状态的tab项

scrollLeft可以设置滚动效果

元素需要设置overflow，并且不能为visibility

并且需要改元素的宽度超过父元素的宽度，才能给this.$refs.tabDiv.scrollLeft赋值成功，否则一直为0，赋值不成功

比如：tab的数据是通过接口拿到的，这时候需要在this.$nextTick(() => \{\})在这个方法里面调用设置scrollLeft的方法，就可以实现滑动效果

**使用scrollTop的问题**  
如果页面有input textarea框，页面底部有按钮，在输入框聚焦的时候，点击按钮，本意触发按钮事件，但是会先触发input的失焦事件，如果此时在失焦事件里面，给页面设置scrollTop值，这样就会导致按钮在页面的位置发生变化，这样就不会触发按钮的事件了

Input的失焦事件会比按钮的点击事件先触发

[https_blog.csdn.net_zh_rey_article_details_78967174]: https://blog.csdn.net/zh_rey/article/details/78967174