点击导航栏目在页面内部跳转；在普通的html文档中 ，页面内部的锚点跳转，大家一般用 a 标签a href=#锚点Id /a,同时在需要跳转到的地方 ，要设置一个锚点（非常形象的理解，渔船出海要停船了，预防漂走，第一要抛锚大笑），如何设置锚点,对应的元素 id=锚点id,如法一 !DOCTYPE htmlhtmlheadmeta charset=utf-8title红宝书训练/titlestylediv{width: 100%;height: 500px;border: 2px solid ;background: orange;}/style/headbodyullia href=#div1跳转div1/a/lilia href=#div2跳转div2/a/lilia href=#div3跳转div3/a/li/ul hr div id=div1div1/divdiv id=div2div2/divdiv id=div3div3/div/body/html这种办法的缺点 页面的URL 会发生变化 如URL ：file:///C:/Users/31295/DeskTOP/html5实例/红宝书训练.html#div1，当点击上方a，页面内部跳转，同时上方URL的标红部分也会发生变化 （这不是大家想要的）办法二，在js事件中通过window.location.hash=divId ，改变# 号后面的 值 但地址也会发生变化，感觉跟第一种办法没不同，甚至更麻烦。办法三，借助Element.scrollIntoView()办法，让元素滚动到浏览器的窗口可视地区，先看下办法对应的参数 element.scrollIntoView(align-TOP); // Boolean型参数 element.scrollIntoView()默认参数true; element.scrollIntoView(scrollIntoViewOptions); // Object型参数1.Element.scrollIntoView() 等同于 Element.scrollIntoView(true) 也即默认值true,表示元素的顶端和浏览器可视地区的顶端对齐。2.Element.scrollIntoView(false) 表示元素的底端和浏览器可视地区的底端对齐。scrollIntoViewOptions(Object型参数) { behavior: auto | instant | smooth, block: start | end, }1.block:start 等于true，block:end 等于false。2.behavior能控制页面跳转的快慢 ，auto 和instant 都是立即直接跳转到所在锚点，不够友好，smooth表示平滑过渡到所在锚点。在react应用中，因为url 变化会触及路由跳转，所以第三种办法优选，如何写呢? scrollToAnchor = (anchorName) = { if (anchorName) { // 找到锚点 let anchorElement = document.getElementById(anchorName); //假如对应的id锚点存在就跳转 if (anchorElement) { anchorElement.scrollIntoView({block: start, behavior: smooth}); } }ul&
