滚动到指定元素

回顾下效果，第一个效果：滚动时候变成白色，2，hover红色条从左到右，移出去才会消失，鼠标长的像i，要改动，

小功能，点技能跳到技能
初步用锚点，id不要用中划线，因为全局变量不好去访问

image.png

效果出现bug，没出现两个字，作品

怎么解决
如果能跳到 浮动div，先把topbar变成半透明。技能正好出现在正上方，被topbar挡住
解决方法，作品上加个style，空100像素用内边距padding作品集实际上很高，绿色才是真正起点，

锚点是不行的，用js
a标签，menu里的li拿到，onclick事件监听一下

let aTags = document.querySelectorAll('nav.menu > ul > li >a')

for (let i=0; i<aTags.length；i++){
      aTags[i].onclick = function(){
        console.log('you clicked')
        console.log(x.currentTarget)
}
}

不想要浏览器默认跳转，因为位置不对
要阻止默认动作
x.preventDefault()
自己帮浏览器滚动，
let a = x.currentTarget
console.log(a.href)目标写在href上

浏览器解析后的地址

a.href并不是写到a上的href

所以用link，href是浏览器处理过的

let a = x.currentTarget
let href = a.getAttribute('href')//用户写什么就是什么
let element =  document.querySelector(href)
let top = element.offsetTop//element上面的距离
window.scrollTo(0,top-80)

debugger

image.png
image.png