一. 点击menu后，滚动到对应的页面位置，在滚动页面过程中选取适当的位移曲线，达到需求的平滑效果
-
涉及到的一些CSS知识点：
-
涉及到的一些JS知识点：
- window.setInterval
WindowOrWorkerGlobalScope的setInterval()方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。
返回一个 intervalID；
本节中采用setInterval实现如下：
let aTags = document.querySelectorAll('#topNavBar nav>ul>li>a')
console.log(aTags)
for(let i = 0; i < aTags.length; i++){
aTags[i].onclick = function(yy){
yy.preventDefault()
let a = yy.currentTarget
let href = a.getAttribute('href')
let element = document.querySelector(href)
let top = element.offsetTop
let targetTop = top - 80
let n = 25;//在一次滚动过程中总的运动次数
let t = 500;//总运动时间
let delay = t/n
let currentTop = window.scrollY
let s = targetTop - currentTop
let dy = s/n;//每一小步运动距离
let i = 1
let id = window.setInterval(()=>{
if(i == n){
window.clearInterval(id)
}
window.scrollTo(0,currentTop+dy*i)
i = i + 1
},delay)
}
}
以上代码实现的效果中，页面的滚动是匀速的，即 Linear；
- tween.js---采用缓动函数来实现各种速率要求的滚动效果
// Setup the animation loop.
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
}
requestAnimationFrame(animate);
for(let i = 0; i < aTags.length; i++){
aTags[i].onclick = function(yy){
yy.preventDefault()
let a = yy.currentTarget
let href = a.getAttribute('href')
let element = document.querySelector(href)
let top = element.offsetTop
let targetTop = top - 80
let currentTop = window.scrollY
let s = targetTop - currentTop
let time =Math.abs(500*s/100)
time = (time > 1000)?1000:time
console.log(time)
var coords = { y: currentTop};
var tween = new TWEEN.Tween(coords)
.to({ y: targetTop }, time)
.easing(TWEEN.Easing.Exponential.InOut)
.onUpdate(function() {
window.scrollTo(0,coords.y)
})
.start();
}
}
二. 页面滚动到某一区域时，对应该区域的顶部导航目录高亮
初步完成后的代码：
window.onscroll = function(xx){
let specialTags = document.querySelectorAll('[data-x]')
let minIndex = 0
for(let i = 0; i < specialTags.length; i++){
if(Math.abs(specialTags[i].offsetTop - window.scrollY) < Math.abs(specialTags[minIndex].offsetTop - window.scrollY)){
minIndex = i
}
}
let id = specialTags[minIndex].id
let a = document.querySelector('a[href="#'+id+'"]')
console.log(a)
let li = a.parentNode
let liAndBrother = li.parentNode.children
console.log(liAndBrother)
for(let i = 0; i < liAndBrother.length; i++){
liAndBrother[i].classList.remove('active')
}
li.classList.add('active') //.active选择器为实现topNavBar时用到的，
}
bug调试：.active选择器为实现topNavBar时用到的，调试时发现，此时要求的高亮效果与之前 topNavBar 的动态效果不完全一样，因此利用已有 .active选择器并不合适；为了区分这两种只有部分相同的动态效果，此处另外新增一个 .highlight
-
涉及到的一些CSS知识点：
- data-* 自定义属性
HTML 语法
语法非常简单。所有在元素上以data-开头的属性为数据属性。比如说你有一片文章，你想要存储一些没有可视化展现意义的额外信息。请使用data属性：
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>
JavaScript 访问:
var article = document.querySelector('#electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
CSS 访问
你同样可以在CSS中使用属性选择器根据data来改变样式：
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}
-
涉及到的一些JS知识点：
Node.parentNode
Node.parentElement
ParentNode.children 与 Node.childNodes 的区别
ParentNode.children---获取一个元素的所有子代标签（标签不包含文本）；
Node.childNodes---获取一个元素的所有子代节点（包含文本）；
