语法一:window.scrollTop(x,y)  传俩个值
   
   //x横坐标 y纵坐标
  
  
   
    例:window.scrollTop(0,1000)
   
  
  
   语法二:window.scrollTop(options) 传对象,对象里面放属性
  
    window.scrollTo({
           top:560,
          left:0,
          behavior: "smooth"
// top:纵坐标   left:横坐标
 
behavior  类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
 
    // 获取html元素
    let htmlDom = document.documentElement;
    // 获取页面高度加内边距
    const deviceHeight = htmlDom.clientHeight;
    //获取当前滚动条的高度
    const scrollHeight=htmlDom.scrollHeight;
    //获取页面高度加内边距加边框
    const offsetHeight=htmlDom.offsetHeight;
    console.log("html--------",htmlDom.offsetHeight);
    console.log("deviceHeight",deviceHeight);
    console.log("scrollHeight",htmlDom.scrollHeight);
    //我的业务里面只用到了这个scrollHeight
    let keepHeight=htmlDom.scrollHeight-90;
    // 如果需要设置某个元素的样式等用ref进行一个绑定 这个例子ref绑定的就是list
    // this.$refs.list.style.height = htmlDom.scrollHeight +"px"
    window.scrollTo({
      top: keepHeight,
      behavior: 'instant'
配个官方图理解:
 
二.回到页面顶部实现方法
 
 1.  元素中绑定ref 
 
 <div ref="returnTop"></div>
 
  在需要回到顶部的地方加上此代码
 
   this.$nextTick(() => {
        this.$refs.returnTop.scrollTop = 0
2.   浏览器回到页面顶部 window.scrollTo(0,0),页面滚动
 
不用多介绍了,上面有。
 
一个小例子如下:
 
window.scrollTo( 0, 100 );
// 设置滚动行为改为平滑的滚动
window.scrollTo({
    top: 1000,
    behavior: "smooth"
3.使用el-pagination实现翻页自动回到顶部
 
定义$scrollTo方法挂载在vue全局
 
// main.js
Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => {
    window.scrollTo({
        top: x,
        left: y,
        behavior: type // 滚动行为:smooth平滑滚动,instant瞬间滚动,默认值auto,等同于instant
// 使用方法
this.$scrollTo()
 
三.总计一下今天学到的新知识
 
(1)watch监听属性变化函数
 
   监听属性的两种写法:
 
isHot:{
	// immediate:true, //初始化时让handler调用一下
	//handler什么时候调用?当isHot发生改变时。
    //deep:true, //开启深度监视,当属性是个对象时,如需监听对象的属性,需开启深度监视
	  handler(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue)
/* isHot(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue,this)
watch监听函数实现compted函数相同功能
 
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			watch:{
				firstName(val){
                   //监听函数可以实现异步方法
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				lastName(val){
					this.fullName = this.firstName + '-' + val
 (2)computed和watch之间的区别:
 
1.computed能完成的功能,watch都可以完成。
 
2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
 
但是computed进行计算某些值得时候,可以少写一个属性。例如:fullName
浏览各大云平台,发现一个页面特效使用较为频繁,以“百度云”为例(https://cloud.baidu.com/),进入百度云后,当滚动条滚动至“更可靠的数据支持”模块时,页面数据将会开始滚动式增长特效。下面将会介绍我的解决方案,希望有同行更好的解决方案大家一起交流。
主要的解决要点如下:
如何实现数字动画的效果
如何监听滚动条到指定的位置
分解要点寻找解决思路:
一、如何实现数字动画的效果
在vue的官方文档(https://cn.vuejs.org/v2/guide… 中,实现了数字动画特效。于是参照此示例基于tween来完成。
二、如何监听滚动条到指定的位置
this.$nextTick(() => {
const el = document.querySelector('.act-not');
const offsetHeight = el.offsetHeight;
el.onscroll = () => {
const scrollTop = el.scrollTop;
const scrollHeight = el.scrollHeight;
if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
// 需要执行的代码
坑:在做滚动加载分页时候,有时候第三
方法一:锚点
锚点通过在元素上设置id,然后用a标签的href="#id"属性跳转到指定位置。
也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。
	//dom
    <a href="#li50">跳到50</a>
    <ul class="ul" id="ul">
      <li v-for
<div id="show" ref="view">展示</div>
1、利用scrollIntoView()方法,该方法将调用它的元素滚动到浏览器窗口的可见区域(根据其他元素的布局,元素可能无法完全滚动到顶部或底部)
ps:页面可滚动时才有用!!!
methods:{
    go(){
      document.getElementById("show").scrollIntoView
                                    VueScrollTo是一个基于Vue的平滑滚动插件,实现网页中元素点击后平滑滚动到目标位置的效果。在很多情况下,我们需要在网页中使用锚点链接,但是默认的锚点跳转方式可能会出现跳动或者瞬间跳转的情况,使用VueScrollTo可以避免这些问题。接下来将从以下几个方面详细介绍VueScrollTo的使用方法。
  this.$nextTick(() => {
     setTimeout(() => {
        let targetbox= document.getElementById('targetbox');
        this.target= targetbox.offsetTop;        
//再滑动指定距离
document