语法一: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