web-dev-qa-db-ja.com

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

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

javascriptjquerycssmodal-dialog
171
Exitos

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

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

あるいは、上にスナップするのではなく、小さなアニメーションが必要な場合は、次のようにします。

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

アニメーションがなくても、プレーンなJSを使うことができます。

scroll(0,0)

アニメーションでは、 Nick's answer を確認してください。

124
Ionuț Staicu

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

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

トリックをするべきです。

33
Silkster

あなたはJavaScriptなしでそれをすることができて、単にアンカータグを使うことができますか？それからそれはそれらのjsに無料でアクセス可能でしょう。

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

13
S.Kiers

私はこれが古いことを知っています、しかしEdgeで問題を抱えている人たちのために：

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

残念ながら、scroll()とscrollTo()はEdgeでエラーを投げます。

2
Josh Powlison
// 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>
1
Waruna Manjula

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

1
gary