JavaScript / jQueryでページの一番上にスクロールする方法は？

JavaScript / jQueryでブラウザのスクロールを制御する方法はありますか？

ページを半分下にスクロールしてからリロードをトリガーすると、ページが一番上にパックされますが、代わりに最後のスクロール位置を見つけようとします。だから私はこれをしました：

$('document').ready(function() {
   $(window).scrollTop(0);
});

しかし、運はありません。

編集：

ですから、ページが読み込まれた後に私がそれらを呼び出すと、両方の回答が機能しました。ただし、ページを更新するだけの場合は、.readyイベントの後にブラウザが古いスクロール位置を計算してスクロールするように見えます（本文のonload（）関数もテストしました）。

したがって、フォローアップは、ブラウザがその過去の位置にスクロールするのを防ぐ方法、またはそれが実行された後に最上部に再スクロールする方法はありますか？

うわー、私はこの質問に9年遅れています。どうぞ：

このコードをオンロードに追加します。

// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);

history.scrollRestorationブラウザーのサポート：

Chrome：サポート（46以降）

Firefox：サポート（46以降）

IE / Edge：サポートされていません（まだです）

Opera：サポート（33以降）

Safari：サポートされています

IE / Edgeの場合、自動スクロールダウンした後に上部に再スクロールする場合、これは私にとってはうまくいきました：

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
    setTimeout(function(){ window.scrollTo(0, 0); }, 300);  // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
} 

クロスブラウザの純粋なJavaScriptソリューション：

document.body.scrollTop = document.documentElement.scrollTop = 0;

あなたはほとんどそれを得た-あなたが設定する必要がscrollTopでbodyていません、window：

$(function() {
   $('body').scrollTop(0);
});

編集：

おそらく、ページの上部に空白のアンカーを追加できます。

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});

ブラウザが過去の位置にスクロールするのを防ぐ方法、またはブラウザがその機能を実行した後に最上部に再スクロールする方法はありますか？

次のjqueryソリューションは私のために働きます：

$(window).unload(function() {
    $('body').scrollTop(0);
});

以下は、jQueryを使用しないユーザー向けの純粋なJavaScriptアニメーションスクロールバージョンです。D

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

その後：

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>

更新

スクロール効果を使用してページの上部に移動することで、JavaScriptの方が少し簡単になりました。

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

window.scroll({
 top: 0, 
 left: 0, 
 behavior: 'smooth' 
});

注意

私たちは最近のプロジェクトでこれを使用していますが、私は答えを更新しているときに今すぐmozilla docを確認したところ、更新されたと思います。今方法があるwindow.scroll(x-coord, y-coord)と言及または使用例を示していないobjectユーザーが設定可能なパラメータbehaviorにしますsmooth。私はコードを試してみましたが、それはまだクロムとファイアフォックスで動作し、オブジェクトパラメータはまだ仕様にあります。

したがって、注意して使用するか、このポリフィルを使用できます。上部へのスクロールの他に、このポリフィルは他のメソッドも処理します。window.scrollBy、element.scrollIntoViewなど

古い答え

これがバニラjavascript実装です。クリック後にユーザーがショックを受けないように、簡単なイージング効果があります。トップへ ]ボタンを。

非常に小さく、縮小するとさらに小さくなります。jqueryメソッドに代わるものを探しているが、同じ結果が欲しい開発者はこれを試すことができます。

JS

document.querySelector("#to-top").addEventListener("click", function(){

    var toTopInterval = setInterval(function(){

        var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;

        if (supportedScrollTop.scrollTop > 0) {
            supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
        }

        if (supportedScrollTop.scrollTop < 1) {
            clearInterval(toTopInterval);
        }

    }, 10);

},false);

HTML

<button id="to-top">To Top</button>

乾杯！

これは私にとってはうまくいきます：

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

setTimeout内部でshort を使用onloadして、ブラウザにスクロールを実行する機会を与えます。

jQueryで使用できます

jQuery(window).load(function(){

    jQuery("html,body").animate({scrollTop: 100}, 1000);

});

次の関数を使用します

window.scrollTo(xpos, ypos)

ここではxposが必要です。x軸（水平）に沿ってスクロールする座標（ピクセル単位）

yposも必要です。Y軸（垂直）に沿ってスクロールする座標（ピクセル単位）

$(function() {
    // the element inside of which we want to scroll
        var $elem = $('#content');

        // show the buttons
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');  

        // whenever we scroll fade out both buttons
    $(window).bind('scrollstart', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
        // ... and whenever we stop scrolling fade in both buttons
    $(window).bind('scrollstop', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });

        // clicking the "down" button will make the page scroll to the $elem's height
    $('#nav_down').click(
        function (e) {
            $('html, body').animate({scrollTop: $elem.height()}, 800);
        }
    );
        // clicking the "up" button will make the page scroll to the top of the page
    $('#nav_up').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 800);
        }
    );
 });

これを使って

次のコードはFirefox、Chrome、Safariで機能しますが、Internet Explorerでテストすることはできませんでした。誰かがそれをテストしてから、私の回答またはコメントを編集できますか？

$(document).scrollTop(0);

私の純粋な（アニメーション）Javascriptソリューション：

function gototop() {
    if (window.scrollY>0) {
        window.scrollTo(0,window.scrollY-20)
        setTimeout("gototop()",10)
    }
}

説明：

window.scrollY ウィンドウがスクロールされた上からのピクセル数をブラウザが保持する変数です。

window.scrollTo(x,y) x軸とy軸でウィンドウを特定のピクセル量だけスクロールする関数です。

したがって、 window.scrollTo(0,window.scrollY-20)ページを上に20ピクセル移動します。

setTimeout（アニメーション）、我々は、それを別の20個の画素を移動させることができるように、10ミリ秒で再び関数を呼び出し、そしてif、我々はまだスクロールする必要がある場合は文のチェックを。

次のように、htmlファイルの最初に参照要素を使用しないでください。

<div id="top"></div>

そして、ページが読み込まれたら、単に

$(document).ready(function(){

    top.location.href = '#top';

});

この関数が起動した後にブラウザがスクロールする場合は、単に

$(window).load(function(){

    top.location.href = '#top';

});

クロスブラウザで上にスクロール：

        if($('body').scrollTop()>0){
            $('body').scrollTop(0);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>0){    //IE, FF
                $('html').scrollTop(0);
            }
        } 

クロスブラウザーでid = div_idの要素までスクロールします。

        if($('body').scrollTop()>$('#div_id').offset().top){
            $('body').scrollTop($('#div_id').offset().top);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>$('#div_id').offset().top){    //IE, FF
                $('html').scrollTop($('#div_id').offset().top);
            }
        } 

編集した質問に答えるには、次のonscrollようにハンドラーを登録します。

document.documentElement.onscroll = document.body.onscroll = function() {
    this.scrollTop = 0;
    this.onscroll = null;
}

これにより、最初のスクロールの試行（ブラウザによる自動試行）が効果的にキャンセルされるようになります。

quircksモードの場合（@Niet the Dark Absolに感謝）：

document.body.scrollTop = document.documentElement.scrollTop = 0;

ストリクトモードの場合：

document.documentElement.scrollTop = 0;

ここではjQueryは必要ありません。

これは機能しています：

jQuery(document).ready(function() {
     jQuery("html").animate({ scrollTop: 0 }, "fast");
});

私の場合、体はうまくいきませんでした：

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

しかし、HTMLは機能しました：

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

これら2つの組み合わせが私を助けました。スクロールしていないサイドナビゲーションがあったので、他の答えはどれも役に立ちませんでした。

 setTimeout(function () {
        window.scroll({
                        top: 0,
                        left: 0,
                        behavior: 'smooth'
                    });

    document.body.scrollTop = document.documentElement.scrollTop = 0;

}, 15);

var totop = $('#totop');
totop.click(function(){
 $('html, body').stop(true,true).animate({scrollTop:0}, 1000);
 return false;
});

$(window).scroll(function(){
 if ($(this).scrollTop() > 100){ 
  totop.fadeIn();
 }else{
  totop.fadeOut();
 }
});

<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>

アニメーションなし、ただscroll(0, 0)（バニラJS）

sidenavで角度とマテリアルデザインを使用している場合。これにより、ページの上部に移動します。

let ele = document.getElementsByClassName('md-sidenav-content');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = document.documentElement.scrollTop = 0;
    });

Seeintハッシュは仕事をするべきです。ヘッダーがある場合は、使用できます

window.location.href = "#headerid";

それ以外の場合は、＃だけで機能します

window.location.href = "#";

そして、それがURLに書き込まれると、更新してもそのまま残ります。

実際、そのためにJavaScriptは必要ありません。onclickイベントで実行する場合は、要素の周囲にリンクを配置し、＃をhrefとして指定するだけです。

まず、行きたい場所に空のアンカータグを追加します

<a href="#topAnchor"></a> 

次に、ヘッダーセクションに関数を追加します。

 function GoToTop() {
            var urllocation = location.href;
            if (urllocation.indexOf("#topAnchor") > -1) {
                window.location.hash = "topAnchor";
            } else {
                return false;
            }
        }

最後にonloadイベントをbodyタグに追加します

<body onload="GoToTop()">

X値とY値で機能する汎用バージョンで、window.scrollTo APIと同じですが、scrollDurationが追加されています。

* window.scrollToブラウザーAPIに一致する一般的なバージョン**

function smoothScrollTo(x, y, scrollDuration) {
    x = Math.abs(x || 0);
    y = Math.abs(y || 0);
    scrollDuration = scrollDuration || 1500;

    var currentScrollY = window.scrollY,
        currentScrollX = window.scrollX,
        dirY = y > currentScrollY ? 1 : -1,
        dirX = x > currentScrollX ? 1 : -1,
        tick = 16.6667, // 1000 / 60
        scrollStep = Math.PI / ( scrollDuration / tick ),
        cosParameterY = currentScrollY / 2,
        cosParameterX = currentScrollX / 2,
        scrollCount = 0,
        scrollMargin;

    function step() {        
        scrollCount = scrollCount + 1;  

        if ( window.scrollX !== x ) {
            scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
        } 

        if ( window.scrollY !== y ) {
            scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
        } 

        if (window.scrollX !== x || window.scrollY !== y) {
            requestAnimationFrame(step);
        }
    }

    step();
}

これが他の場所に投稿されたのを見たのを覚えています（どこにあるのかわかりませんでした）が、これは非常にうまく機能します。

setTimeout(() => {
    window.scrollTo(0, 0);
}, 0);

奇妙ですが、その動作は、JavaScriptのスタックキューの動作に基づいています。完全な説明は、ここでゼロ遅延セクションにあります。

基本的な考え方は、の時間setTimeoutは実際に待機する設定時間を指定するのではなく、待機する最小時間を指定することです。したがって、0ミリ秒待機するように指示すると、ブラウザは他のすべてのキューに入れられたプロセス（ウィンドウを最後にスクロールした場所など）を実行してから、コールバックを実行します。

 <script>
  sessionStorage.scrollDirection = 1;//create a session variable 
  var pageScroll = function() {
  window.scrollBy ({
   top: sessionStorage.scrollDirection,
   left: 0,
   behavior: 'smooth'
   });
   if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
  {    
    sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
    setTimeout(pageScroll,50);//
   }
   else{
   sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
   setTimeout(pageScroll,300); 
  }
};
pageScroll();
</script>