项目中实际使用js锚点案例

<button class="equities" onclick="scrollToSection('equitiesSection')"></button>
<button class="welfare" onclick="scrollToSection('welfareSection')"></button>
<button class="ourUser" onclick="scrollToSection('ourUserSection')"></button>
<button class="call" onclick="scrollToSection('callSection')"></button>
<button class="backHome" onclick="goToHomePage();"></button>

<script>
		
		document.addEventListener('DOMContentLoaded', function() {
			var button = document.querySelector('.btn');
			var maskLayer = document.querySelector('.maskLayer');
			var btnClose = document.querySelector('.btn_close');

			// 移除现有的事件处理程序
			button.removeEventListener('click', expandButtonClick);
			btnClose.removeEventListener('click', closeButtonClick);

			// 添加点击事件处理程序
			function expandButtonClick(event) {
				event.stopPropagation(); // 阻止事件冒泡，避免传播到父元素
				console.log('点击了展开按钮');
				maskLayer.style.display = 'block'; // 点击展开按钮显示 maskLayer 元素
			}

			function closeButtonClick(event) {
				event.stopPropagation(); // 阻止事件冒泡，避免传播到父元素
				console.log('点击了关闭按钮');
				maskLayer.style.display = 'none'; // 点击关闭按钮隐藏 maskLayer 元素
			}

			button.addEventListener('click', expandButtonClick);
			btnClose.addEventListener('click', closeButtonClick);
    	});

		// JavaScript 函数，用于页面滚动到指定的位置
		function scrollToSection(sectionId) {
			var section = document.getElementById(sectionId);
			if (section) {
				section.scrollIntoView({ behavior: 'smooth' }); // 平滑滚动到指定位置
			}
		}
        function goToHomePage() {
    // 将页面导航到 xxxx.com
    window.location.href = 'https://xxxx.com';
    
    // 隐藏 maskLayer 侧边栏
    var maskLayer = document.querySelector('.maskLayer');
    if (maskLayer) {
        maskLayer.style.display = 'none';
    }
}

	</script>