JavaScriptを使用してページの一番上までスクロールしますか？

JavaScriptを使用してページの上部にスクロールするにはどうすればよいですか？スクロールバーがすぐに一番上にジャンプしても望ましいです。私はスムーズなスクロールを探していません。

アニメーションを変更する必要がない場合は、特別なプラグインを使用する必要はありません。ネイティブのJavaScript window.scrollToメソッドを使用するだけです。0,0を渡すと、ページがすぐに左上にスクロールされます。 。

window.scrollTo(x-coord, y-coord);

パラメーター

• x-coordは水平軸に沿ったピクセルです。
• y座標は垂直軸に沿ったピクセルです。

スムーズなスクロールが必要な場合は、次のようにしてください。

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

それはその<a>タグを取りhref="#top"、上にスムーズにスクロールします。

これを上にスクロールしてみてください

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

スムーズなアニメーションによるより良いソリューション：

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });

リファレンス：https : //developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

これを行うためにjQueryは必要ありません。標準のHTMLタグで十分です...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

これらの提案はすべて、さまざまな状況に適しています。このページを検索で見つけた人のために、これを試すこともできます。JQuery、プラグインなし、要素までスクロール。

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

スムーズスクロール、純粋なJavaScript：

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

編集：

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

上と左のマージンでスクロールする別の方法：

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

HTMLで

<a href="#top">go top</a>

本当に奇妙です：この質問は5年間有効ですが、スクロールをアニメーション化するためのJavaScriptのバニラの答えはまだありません…だからここに行きます：

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

必要に応じて、これを関数でラップし、onclick属性を介して呼び出すことができます。このjsfiddleを確認してください

注：これは非常に基本的なソリューションであり、パフォーマンスが最も高いとは限りません。非常に精巧な例がここにあります：https : //github.com/cferdinandi/smooth-scroll

スムーズなスクロールをしたい場合は、これを試してください：

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

別の解決策は、JavaScript window.scrollToメソッドです。

 window.scrollTo(x-value, y-value);

パラメーター ：

• x値は、水平軸に沿ったピクセルです。
• y値は垂直軸に沿ったピクセルです。

With window.scrollTo(0, 0);は非常に高速な
ので、Mark Ursinoの例を試しましたが、Chromeでは何も起こらず
、これを見つけました

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

3つすべてのブラウザーをテストし、動作します。
ブループリントのcssを使用
しています。これは、クライアントが[今すぐ予約]ボタンをクリックし、レンタル期間が選択されていない場合に、カレンダーが表示されている上部にゆっくりと移動し、次を指すダイアログdivを開きます。 2つのフィールド、3秒後にフェードします

多く の ユーザーはそうのように、クロスブラウザの互換性のためにhtmlと体タグの両方を選択するお勧めします。

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

ただし、コールバックが1回だけ実行されることを期待している場合は、これによってつまずく可能性があります。2つの要素を選択したため、実際には2回実行されます。

それがあなたにとって問題であるなら、あなたはこのようなことをすることができます：

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

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

これが機能する理由は、Chromeでは$('html').scrollTop()0が返されますが、Firefoxなどの他のブラウザーでは返されません。

スクロールバーがすでに一番上にある場合にアニメーションが完了するのを待ちたくない場合は、次のことを試してください。

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

老人#topはトリックをすることができます

document.location.href = "#top";

FF、IE、Chromeで正常に動作します

これを試して

<script>
    $(window).scrollTop(100);
</script>

$(document).scrollTop(0); も動作します。

非jQueryソリューション/純粋なJavaScript：

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

これは動作します：

window.scrollTo(0, 0);

このコードを試してください：

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div =>スクロールを移動するDom要素。

時間=>ミリ秒。スクロールの速度を定義します。

純粋なJavaScriptソリューション：

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

Codepenでアニメーションソリューションを書く

また、CSS scroll-behavior: smoothプロパティを使用して別のソリューションを試すこともできます。

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

JQueryの組み込み関数scrollTopを使用しないのはなぜですか。

$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

短くてシンプル！

JQueryは必要ありません。単にあなたはスクリプトを呼び出すことができます

window.location = '#'

「トップに戻る」ボタンをクリックしたとき

サンプルデモ：

output.jsbin.com/fakumo#

PS：angularjsのような最新のライブラリを使用している場合は、このアプローチを使用しないでください。これはURLのハッシュバンを壊したかもしれません。

このスクリプトを使用して、直接トップにスクロールします。

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

スムーズスクロールが必要ない場合は、スムーズスクロールアニメーションを開始するとすぐに、チートしてスムーズスクロールアニメーションを停止できます。

   $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

それが推奨/許可されているかどうかはわかりませんが、動作します:)

いつこれを使用しますか？確かではありませんが、JQueryを使用して1つのクリックをアニメーション化したいが、アニメーションなしで別のアニメーションを実行したい場合はどうでしょうか。つまり、ページの上部にあるスライドイン管理ログインパネルを開き、すぐに上部に移動して表示します。

動機

このシンプルなソリューションはネイティブで機能し、任意の位置へのスムーズなスクロールを実装します。

#私の意見では、セクションにリンクする場合に便利ですが、特に2つの異なるURLを指すトップにポイントする場合に、特定の状況ではそれほど快適ではないアンカーリンク（が付いているリンク）の使用を避けます同じ場所（http://www.example.orgおよびhttp://www.example.org/#）。

解決

入れてIDをあなたの最初の例のために、あなたがスクロールしたいタグにセクションこの質問に答える、しかし、idがページのどこでも配置することができます。

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

次に、リンクとして使用できるボタンとして、onclick属性を次のようなコードで編集します。

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

の引数document.getElementByIdは、クリック後にスクロールするタグのIDです。

#someidなどのリンクからのターゲットを使用できます。＃someidはdivのIDです。

または、これをよりエレガントにするスクロールプラグインをいくつでも使用できます。

http://plugins.jquery.com/project/ScrollToは一例です。

このフィドルhttp://jsfiddle.net/5bNmH/1/のようにJSを使用して試すことができます

ページフッターに[先頭に移動]ボタンを追加します。

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

上記の回答はSharePoint 2016では機能しません。

これは次のように行う必要があります：https : //sharepoint.stackexchange.com/questions/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;