Pure JS は、ボタンをクリックしてページの先頭に戻るコードを実装します。-jsチュートリアル-php.cn

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

yulia

リリース： 2018-10-19 10:37:04

オリジナル

7478 人が閲覧しました

コンピューターでウェブサイトを閲覧している場合でも、携帯電話でウェブサイトを閲覧している場合でも、ページを下にスライドすると、ユーザーがトップに直接戻るように促すボタンが右下隅にあることに気づきましたか。ネイティブ 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;
  }

ログイン後にコピー

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

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