web-dev-qa-db-ja.com

JavaScript / jQueryでページのトップにスクロールする方法は？

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

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

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

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

編集：

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

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

javascriptjqueryhtmlscroll
143
Yarin

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

document.body.scrollTop = document.documentElement.scrollTop = 0;
291
Niet the Dark Absol

almost取得済み-scrollTopではなく、bodyをwindowに設定する必要があります。

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

編集：

ページの上部に空白のアンカーを追加できる場合があります。

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

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

次のjqueryソリューションは私のために機能します：

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

これは、no-jQuery'ers向けの純粋な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>
15
ulfryk

UPDATE

スクロール効果を使用してページの上部に移動することは、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パラメーターを使用する例については言及も表示もしていません。コードを試してみましたが、chromeとfirefoxで動作し、オブジェクトパラメータは spec にあります。

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

古い回答

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

その非常に小さく、縮小するとさらに小さくなります。 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>

乾杯！

9
Jo E.

JQueryで使用できます

jQuery(window).load(function(){

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

});
8
Chanderkesh Kumar

これは私のために働く：

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

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

8
user113716

次の機能を使用します

window.scrollTo(xpos, ypos)

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

yposも必須です。 y軸（垂直）に沿った、スクロールする座標（ピクセル単位）

6
Shoaib Quraishi
$(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);
        }
    );
 });

これを使って

5
Ekin Ertaç

私の純粋な（アニメーション化された）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は関数を10ミリ秒で再度呼び出して、さらに20ピクセル（アニメーション）移動できるようにし、ifステートメントはまだスクロールする必要があるかどうかを確認します。

4
Toastrackenigma

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

$(document).scrollTop(0);
4
bigblind

ブラウザーを超えて上にスクロールする：

        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);
            }
        }
3
Binod

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

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

そして、ページがロードされたら、単に

$(document).ready(function(){

    top.location.href = '#top';

});

ブラウザがスクロールする場合afterこの関数が起動すると、単に

$(window).load(function(){

    top.location.href = '#top';

});
3
arik

これは機能しています：

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

これら2つの組み合わせは私を助けました。私はスクロールしていないサイドナブを持っていたので、他の答えのどれも私を助けませんでした。

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

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

}, 15);
2
shailesh gavathe

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

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

厳格モードの場合：

document.documentElement.scrollTop = 0;

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

2
Zlatan

私の場合、身体は機能しませんでした：

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

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

$('html').scrollTop(0);
2
Sachin Prasad

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

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

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

2
Niet the Dark Absol
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;"/>
1
user3178603

誰かがangularと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;
    });
1
Helzgate

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

1
maxbellec
 <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>
0
Kenrick Humber

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

window.location.href = "#headerid";

そうでない場合は、＃だけで機能します

window.location.href = "#";

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

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

0
xavierm02

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

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

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

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

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

<body onload="GoToTop()">
0
Satii

任意の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();
}
0
jamesmfriedman