js实现点击按钮 页面平滑回至顶部/底部

实现点击按钮返回顶部的方法有多种，以下是其中一种基本实现方法： 1. 在页面底部添加一个“返回顶部”按钮，例如： ``` <button id="back-to-top">返回顶部</button> ``` 2. 在CSS中设置该按钮的样式，例如： ``` #back-to-top { display: none; /* 初始时隐藏按钮 */ position: fixed; /* 固定在页面右下角 */ bottom: 20px; right: 20px; z-index: 99; font-size: 16px; border: none; outline: none; background-color: #555; color: white; cursor: pointer; padding: 10px; border-radius: 4px; } #back-to-top:hover { background-color: #333; /* 鼠标悬停时改变背景色 */ } ``` 3. 使用JavaScript监听页面滚动事件，并且根据页面滚动位置显示或隐藏“返回顶部”按钮，例如： ``` window.addEventListener('scroll', function() { var backToTopBtn = document.getElementById('back-to-top'); if (window.pageYOffset > 300) { /* 当页面滚动超过300px时显示按钮 */ backToTopBtn.style.display = 'block'; } else { /* 页面滚动位置小于等于300px时隐藏按钮 */ backToTopBtn.style.display = 'none'; } }); ``` 4. 给“返回顶部”按钮添加点击事件，使其回到页面顶部，例如： ``` document.getElementById('back-to-top').addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' /* 平滑滚动回到页面顶部 */ }); }); ``` 完成以上步骤后，点击“返回顶部”按钮即可平滑地回到页面顶部。