This article describes the settings and usage methods of JS anchor points. Share it for your reference, as follows:
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>Anchor</title></head><body><ul> <li><a href="javascript:void(0);" onclick="naver('A')">Anchor A</a></li> <li><a href="javascript:void(0);" onclick="naver('C')">Anchor B</a></li> <li><a href="javascript:void(0);" onclick="naver('C')">Anchor C</a></li> <li><a href="javascript:void(0);" onclick="naver('D')">Anchor D</a></li></ul><div style="background-color: #f60; height: 400px;" id="A"> AAA</div><div style="background-color: #f06; height: 400px;" id="B"> BBB</div><div style="background-color: #60f; height: 400px;" id="C"> CCC</div><div style="background-color: #06f; height: 400px;" id="C"> CCC</div><div style="background-color: #06f; height: 400px;" id="C"> CCC</div><div style="background-color: #06f; height: 400px;" id="D"> DDD</div><script>//Set anchor function naver(id){ var obj = document.getElementById(id); var oPos = obj.offsetTop; return window.scrollTo(0, oPos-36);}</script></body></html>Reproduction image:
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Traversal Algorithm and Skills", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Skills", "Summary of JavaScript Errors and Debugging Skills", "Summary of JavaScript Data Structures and Algorithm Skills" and "Summary of JavaScript Mathematical Operation Usage"
I hope this article will be helpful to everyone's JavaScript programming.