為網頁添加「平滑返回頂部」功能

頁面底部創建一個懸浮按鈕,當用戶滾動頁面時,按鈕會自動顯示或隱藏。當用戶點擊按鈕時,網頁會平滑滾動回到頁面頂部。

為網頁添加「平滑返回頂部」功能

為網頁添加「平滑返回頂部」功能

頁面底部創建一個懸浮按鈕,當用戶滾動頁面時,按鈕會自動顯示或隱藏。當用戶點擊按鈕時,網頁會平滑滾動回到頁面頂部。

以下是詳細步驟:

1. 請先引入jquery:(我這裡使用的是bootcss的cdn)

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

2. html代碼:

<div class="float-button" z-index=10000>
  <a href="#" class="back-to-top">
    <i class="fa fa-arrow-up">
        <p>⬆️</p>
    </i>
  </a>
<script>
    jQuery(document).ready(function($) {
        // 當用戶滾動頁面時,顯示或隱藏返回頂部按鈕
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                $(". back-to-top").fadeIn();
            } else {
                $(". back-to-top").fadeOut();
            }
        });
        // 當用戶點擊返回頂部按鈕時,頁面平滑滾動回到頂部
        $(".back-to-top").click(function() {
            $("html, body").animate({ scrollTop: 0 }, "slow");
            return false;
        });
    });
</script>
</div>

3. css樣式:

.float-button {
  position: fixed;
  bottom: 30px;
  right: 100px;
  z-index: 9999;
}

.float-button a {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #e74c3c;
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.float-button a:hover {
  transform: scale(1.1);
}

评论区 1

    123 (读者)
    2023-03-28 10:17

    123