Pure JS は、ボタンをクリックしてページの先頭に戻るコードを実装します。

コンピューターでウェブサイトを閲覧している場合でも、携帯電話でウェブサイトを閲覧している場合でも、ページを下にスライドすると、ユーザーがトップに直接戻るように促すボタンが右下隅にあることに気づきましたか。ネイティブ JS を使用してページのトップ効果を返す方法を知っていますか?この記事では、ボタンをクリックしてトップに戻るための純粋な JS コードを紹介します。これには一定の参考値があり、興味のある友人はそれを参照できます。

ボタンをクリックしてページの先頭に戻る効果を実現するには、function()、document.getElementById()、if 関数など、多くの JavaScript の知識が必要です。もちろん、PHP 中国語 Web サイトの関連記事を参照するか、JavaScript ビデオ チュートリアル にアクセスしてください。

インスタンスの説明: ユーザーがページを下にスライドすると、スクロール バーと上部の間の距離が 20 ピクセルを超えると、「上部に戻る」ボタンをクリックして上部に戻ります。ボタンが消えます。 具体的なコードは次のとおりです。

HTML 部分:

<button onclick="topFunction()" id="myBtn" title="回顶部">JS返回顶部</button>
<div style="background-color:pink;color:white;padding:80px">向下滑动</div>
<div style="background-color:lightgrey;padding:80px 30px 2500px">页面内容，此处省略一万字</div>

CSS 部分:

*{padding: 0;margin: 0;}
   #myBtn {
     display: none;
     position: fixed;
     bottom: 20px;
     right: 30px;
     z-index: 99;
     border: none;
     outline: none;
     background-color: skyblue;
     color: white;
     cursor: pointer;
     padding: 15px;
     border-radius: 10px;
   }
   
   #myBtn:hover {
     background-color: plum;
   }

JavaScript 部分:

// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};
  function scrollFunction() {console.log(121);
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById("myBtn").style.display = "block";
      } else {
          document.getElementById("myBtn").style.display = "none";
      }
  }
   
  // 点击按钮，返回顶部
  function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
  }

効果は図に示すとおりです。

ネイティブ JavaScript を使用して、ボタンをクリックしてページの先頭に戻るコードを実装する方法を共有しました。コードは簡潔で、手順が詳しく説明されているので、コードがページの先頭に戻るかどうかを確認してください。この記事が役立つことを願っています。

その他の関連チュートリアルについては、JavaScript 中国語リファレンス マニュアル

を参照してください。

以上がPure JS は、ボタンをクリックしてページの先頭に戻るコードを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。