ブラウザページのトップにジャンプする方法

186

モーダルポップアップを作成していて、[モーダルを開く]ボタンが押されたときにブラウザが画面の上部にジャンプする必要があります。jQueryを使用してブラウザーを最上部にスクロールする方法はありますか？

— Exitos
ソース

405

次のscrollTopようにを設定できます。

$('html,body').scrollTop(0);

または、上部にスナップする代わりに小さなアニメーションが必要な場合：

$('html, body').animate({ scrollTop: 0 }, 'fast');

— ニッククレイバー
ソース

1

これを達成するために、jQueryのscrollToプラグインを以前使用しました-コードで少しのコードを保存できたでしょう...レッスンのおかげで;-)

— Zathrus Writer

@MikhailBatcer-CSSを無効にして、機能するかどうかを確認します。タグhtmlとbodyタグのスタイル設定に問題がある可能性があります。それ以外の場合は$(window)代わりに使用してください。

— invot

アニメーションスクロールの期間を追加する方法

— Maxim Strutinskiy

139

アニメーションがなければ、プレーンJSを使用できます。

scroll(0,0)

アニメーションで、ニックの答えを確認してください。

— イオヌイステイク
ソース

4

これはすべてのブラウザでサポートされていますか？

— Pacerier 2013年

1

scrollCSSOM標準に含まscrollToれていますが、もともとDOM Level 0で定義されており、標準の一部ではありません。ただし、CSSOMにscrollToは下位互換性のために含まれています。

— クリントパクル

3

scroll幅広く支持されていると思います。stackoverflow.com/q/1925671/41906を

— Clint Pachl

ありがとう。私の推測では、window && window.scroll(0,0);私の見解モデルで許容されます。

— nrodic 2017年

34

jQuery UIダイアログを使用している場合は、ウィンドウ内で固定された位置で表示されるようにモーダルをスタイルするだけで、ビューの外にポップアップせず、スクロールする必要がなくなります。さもないと、

var scrollTop = function() {
    window.scrollTo(0, 0);
};

トリックを行う必要があります。

— シルクスター
ソース

13

あなたはjavascriptなしでそれを行うことができ、単にアンカータグを使用しますか？その後、それらのjsは無料でアクセスできます。

あなたがモーダルを使用しているので、私はあなたがjsフリーであることを気にしないと思います。;）

— S.Kiers
ソース

1

アンカータグを使用すると、ハッシュベースのナビゲーションが中断されます。

— トム・ランダウ

2

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

スニペットを展開

— ワルナマンジュラ
ソース

2

これは古いことを知っていますが、Edgeで問題が発生している場合：

プレーンJS： window.scrollTop=0;

残念ながら、Edgeでエラーscroll()をscrollTo()スローします。

— ジョシュ・パウリソン
ソース

1

jQuery UIダイアログを使用している場合は、ウィンドウ内の位置を固定してモーダルを表示するようにスタイルを設定し、ビューの外にポップアップしないようにして、スクロールする必要をなくします。その他の

— ゲイリー
ソース

0

純粋なJavascriptソリューション

theId.onclick = () => window.scrollTo(top: 0)

スムーズにスクロールしたい場合

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })

— モガジ
ソース