バニラJavaScriptスクロールトップへ

4018 ワード
javascript テキストリンク
を作成しましょうJavaScript トップスクロール機能に電源を入れました.
我々は、ページの右下に座るボタンを作成し、一度クリックすると、それはページの上部に私たちを取る.

HTML構造


<button onclick="scrollToTop()" class="scroll-top">☝️</button>
それは我々が必要とするすべてです、我々はいくつかを定義しますCSS を使用して、JavaScript .

CSS設定


.scroll-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 99;
  outline: none;
  background-color: #efefef;
  border: 1px solid #333;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
スクロールボタンはposition: fixed , そして、底と右で、我々はそれを右下に相殺します.
その後、それはボックスのように見えるようにいくつかの一般的なスタイリングを行う.

JavaScriptスクロールトップへ


function scrollToTop() {
  window.scroll({top: 0, left: 0, behavior: 'smooth'});
}
これを行うには多くの方法があることに注意してください.
私たちはscrollIntoView この記事のように.しかし、今日、私たちはプレーンスクロール機能を使用しています.
スクロールする必要のある位置と動作を定義できます.
スクロールを行うもう一つの方法はscrollTo :
window.scrollTo(0, 0);
Codepenでそれを見てください.
ペンを見る Vanilla JavaScript Scroll to Top クリスBongersによって@rebelchris )
on CodePen .

ブラウザサポート


残念ながら、スクロールAPIは完全にサポートされていません!

読んでいただきありがとうございます、接続しましょう！


私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or
釣り王(17143号)
[エラー]間欠タイプエラー:fs.readFileSyncは関数エラーではありません