给博客添加回到顶部按钮

在网上随便找了一个代码，添加“平滑过渡动画”和“位于顶部时按钮隐藏”，具体效果可以在页面试试。
全部代码如下：

<div id="backtop">
   <a href="#">TOP</a>
</div> 

<script>
  // 获取返回顶部按钮的 DOM 元素
  var backToTopBtn = document.getElementById("backtop");
  // 初始化按钮状态为隐藏
  backToTopBtn.style.display = "none";
  // 监听页面滚动事件
  window.onscroll = function() {
    // 获取滚动条的垂直位置
    var scrollPos = window.scrollY || document.documentElement.scrollTop;
    // 根据滚动条位置控制按钮的显示和隐藏
    if (scrollPos > 0) {
      backToTopBtn.style.display = "block";
    } else {
      backToTopBtn.style.display = "none";
    }
  };
  // 返回顶部按钮被点击时，使用 jquery 实现平滑滚动效果
  $(backToTopBtn).on("click", function(event) {
    event.preventDefault(); // 阻止默认链接跳转行为
    $("html, body").animate({
      scrollTop: 0
    }, 800); // 800 毫秒为动画时长
  });
</script>

<style>
#backtop a { /* back to top button */
    text-align: center;
    line-height: 35px;
    font-size: 12px;
    width:35px;
    height: 35px;
    position: fixed;
    bottom: 10px; /* 小按钮到浏览器底边的距离 */
    right: 40px; /* 小按钮到浏览器右边框的距离 */
    color: rgb(64,120,192); /* 小按钮中文字的颜色 */
    z-index: 1000;
    background: #fff; /* 小按钮底色 */
    padding: auto; /* 小按钮中文字到按钮边缘的距离 */
    border-radius: 50px; /* 小按钮圆角的弯曲程度（半径）*/
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    font-weight: bold; /* 小按钮中文字的粗细 */
    text-decoration: none !important;
    box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 0 #ffffff inset;
}
#backtop a:hover { /* 小按钮上有鼠标悬停时 */
    background: rgba(64,120,192,0.8); /* 小按钮的底色 */
    color: #fff; /* 文字颜色 */
}
</style>

评论已关闭