10-锚点定位滚动条定位到指定位置动画效果
scrollIntoViewwowjs
需求：（vue项⽬）
导航固定，导航上锚点定位，滚动条滚动有动画效果。
实现⽅法：
1）最简单的莫过于⽤a标签的href="#要跳转的id名"即可，不过这种会造成页⾯的刷新
2）⽤来做，不过这个api是相对于浏览器顶部对齐的。由于我们的导航是固定定位，那么在进⾏滚动的时候，导航会盖着模块的部分内容（导航⾼度），就导致我们看起来好像锚点定位的不准确。这点是弊病
3）有了上⾯的问题，我们需要⾃⼰⼿动去给到滚动位置，⾃⼰去计算；并且加上滚动动画效果
document.documentElement.scrollTop = 100 // 设置滚动条距离浏览器顶部的距离这就是核⼼代码
但是这样是很⽣硬的就滚动到了我们要去的位置，我们需要实现⼀个动画效果：
// 滚动条滚动位置及动画函数封装
/**
* @param {*} number 距离顶部的距离(Number类型)
* @param {*} time  滚动⽤时（Number类型）
* @returns
*/
export const scrollToAnimationFn = (number = 0, time) => {
if (!time) {
document.body.scrollTop = document.documentElement.scrollTop = number
return number
js控制滚动条}
const spacingTime = 20 // 设置循环的间隔时间值越⼩消耗性能越⾼
let spacingInex = time / spacingTime // 计算循环的次数
let nowTop = document.body.scrollTop || document.documentElement.scrollTop // 获取当前滚动条位置
const everTop = (number - nowTop) / spacingInex // 计算每次滑动的距离
const scrollTimer = setInterval(() => {
if (spacingInex > 0) {
spacingInex--
scrollToAnimationFn((nowTop += everTop))
clearInterval(scrollTimer) // 清除计时器
}
}, spacingTime)
}
使⽤：下图中的50，86，16 分别是header的⾼度，导航的⾼度，marginTop
除了之上的基本要求外，我们还可以⽤wowjs进⾏锚点滚动到指定模块后，模块显⽰的动画效果
项⽬中使⽤：
main.js中：
// 动画 animate.css
require('animate.css/animate.min.css')
// 滚动动画 wow.js
import { WOW } from 'wowjs'
Vue.prototype.$wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 150, // default
mobile: true, // default
live: false,
// live为true时，控制台会提⽰：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.
callback: function (box) {
console.log('WOW: animating <' + LowerCase() + '>')
}
})
具体组件中：
(1) 初始化
(2) 结构中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。