一、a标签跳转二、scrollIntoView跳转1、语法2、语法参数3、Demo
一、a标签跳转
直接a标签跳转，显得有点太生硬；加上css，实现页面平滑滚动。<!DOCTYPE html><html><head><title>a-Demo</title></head><style>/* bar超出屏幕，显示在屏幕最上方 */.bar {position:fixed;top:0;bottom:0}.bar a {padding: 20px;}div.content div {padding-top: 20px;height: 1000px;scroll-behavior: smooth;}/* 加上这一句，实现平滑滚动效果 */html, body {scroll-behavior:smooth;}</style><body><div class="bar"><a href="#div1">跳转1</a><a href="#div2">跳转2</a><a href="#div3">跳转3</a></div><div class="content"><div id="div1">这是div1</div><div id="div2">这是div2</div><div id="div3">这是div3</div></div></body></html><script></script>
二、scrollIntoView跳转
1、语法
element.scrollIntoView（）; // 等同于element.scrollIntoView(true)element.scrollIntoView（alignToTop）; //布尔参数element.scrollIntoView（scrollIntoViewOptions）; //对象参数
2、语法参数
3、Demo
<!DOCTYPE html><html><head><title>scrollIntoView-Demo</title></head><style>/* bar超出屏幕，显示在屏幕最上方 */.bar {position:fixed;top:0;bottom:0}.bar label {padding: 20px;}div.content div {padding-top: 20px;height: 1000px;scroll-behavior: smooth;}label:hover{color: deepskyblue;cursor:pointer;}</style><body><div class="bar"><label onclick="jump('div1')">跳转1</label><label onclick="jump('div2')">跳转2</label><label onclick="jump('div3')">跳转3</label></div><div class="content"><div id="div1">这是div1</div><div id="div2">这是div2</div><div id="div3">这是div3</div></div></body></html><script>function jump(id) {document.querySelector('#'+ id).scrollIntoView({behavior: "smooth"})}</script>
