web-dev-qa-db-ja.com

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

ページに<button>があります。このボタンを押すと、jQueryを使用して非表示の<div>が表示されます。

その関数でJavaScript/jQueryコマンドを使用してページの上部にスクロールするにはどうすればよいですか？スクロールバーが即座に最上部にジャンプする場合でも望ましいです。スムーズなスクロールを探していません。

javascriptjqueryscroll
1473
KingNestor

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

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

パラメーター 

  • x座標は水平軸に沿ったピクセルです。 
  • y座標は縦軸に沿ったピクセルです。 
1894
daniellmb

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

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

それは<a>を持つhref="#top"タグを取り、スムーズに一番上にスクロールするようにします。

1250
Mark Ursino

上にスクロールするにはこれを試してください 

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

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

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

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

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

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

滑らかなスクロール、純粋なJavaScript：

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

滑らかなアニメーションによるより良い解決策：

// 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

29
Ganesh Ghalame

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

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

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

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

パラメーター ：

  • x値は水平軸に沿ったピクセルです。
  • y値は縦軸に沿ったピクセルです。
28
Gaurang Sondagar
<script>

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

hTMLで

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

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つのブラウザすべてをテストして動作
私はblueprint cssを使っています
これは、クライアントが「今すぐ予約」ボタンをクリックしてレンタル期間が選択されていないときです。ゆっくりとカレンダーのある場所に移動し、3秒後に2つのフィールドを指すダイアログdivを開きます

24
Luiggi ZAMOL

本当に不思議：この質問は現在5年間有効であり、スクロールをアニメーション化するためのVanilla 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

23
AvL

lotofusers ブラウザ間の互換性のために、htmlタグとbodyタグの両方を選択することをお勧めします。

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

あなたが一度だけ実行しているあなたのコールバックを頼りにしている場合でも、これはあなたをトリップすることができます。 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();
}
22
David Kennedy

古い#topがトリックをやることができます 

document.location.href = "#top";

FF、IE、Chromeで問題なく動作します

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

編集する

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

これを試して

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

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

14
Hari Ganesan

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

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

これでうまくいくでしょう：

window.scrollTo(0, 0);

10
Santosh Jadi

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

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

div => Domスクロールを移動したい要素。

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

10
Wasif Ali

$(".scrolltop").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}
<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>

</body>
</html>

10
arvinda kumar

JQueryの組み込み関数scrollTopを使用しないでください。

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

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

短くてシンプル！

8
Sandeep Gantait

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

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

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

window.location = '#'

「上へ移動」ボタンをクリックしたとき

サンプルデモ： 

output.jsbin.com/fakumo#

シモンズ：あなたがangularjsのような現代のライブラリを使っているとき、このアプローチを使わないでください。それはURLハッシュバングを破ったかもしれません。

7
Sriramajeyam Sugumaran

スムーズスクロールをしたくない場合は、スムーズスクロールのアニメーションを開始するとすぐにカンニングして停止することができます。

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

推奨されているかどうかはわかりませんが、うまくいきます:)

いつ使うのですか？よくわかりませんが、1回クリックしてJqueryで1つのことをアニメートしたいが、アニメーションなしで別のことをしたい場合つまり、ページ上部のスライドイン管理ログインパネルを開き、すぐにそれを見るために上部にジャンプします。

6
Jon Story

動機

この簡単な解決策はネイティブに機能し、任意の位置へのスムーズなスクロールを実装します。

私は、アンカーリンク（#を持つもの）を使用しないようにしています。私の意見では、セクションにリンクしたい場合には便利ですが、状況によってはあまり快適ではありません同じ場所（http://www.example.orgとhttp://www.example.org/#）。

溶液

スクロールしたいタグにidを入れてください。例えば最初のsectionはこの質問に答えますが、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です。

6
Gianluca Casati

#someidのように、リンクからターゲットを使用することもできます。#someidはdivのIDです。

あるいは、これをより洗練させたスクロールプラグインをいくつでも使用できます。

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

5
ScottE

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

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

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

上記の答えはどれもSharePoint 2016では機能しません。

それはこのようにされなければならない： https://sharepoint.stackexchange.com/questions/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
4
jeancallisti
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;
    });
}
4
Mardzis

すべてのブラウザをアクティブにします。がんばろう

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }
3
Anh Tran

これを試して

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>
3
Eugeni Bejan

IDを持つ要素にスクロールしたい場合は、これを試してください。

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``
2
Alan Kael Ball

一番上のスクロールが一番上のスクロールで、一番下のスクロールと一番下のスクロールの間にある場合、ヘッダーは固定です。下記はFiddleの例を参照してください。

var lastScroll = 0;

$(document).ready(function($) {

$(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });

https://jsfiddle.net/memdumusaib/d52xcLm3/ /

1
Musaib Memdu

試してみて、他のプラグイン/フレームワークは不要 

document.getElementById("jarscroolbtn").addEventListener("click", jarscrollfunction);

function jarscrollfunction() {
  var body = document.body; // For Safari
  var html = document.documentElement; // Chrome, Firefox, IE and Opera 
  body.scrollTop = 0; 
  html.scrollTop = 0;
}
<button id="jarscroolbtn">Scroll contents</button> 
html, body {
  scroll-behavior: smooth;
}
0
rajmobiapp

ページの一番上にある要素と要素にスクロールするため

WebElement tempElement=driver.findElement(By.cssSelector("input[value='Excel']"));

            ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", tempElement);
0
Priyanka

document.getElementById("id of what you want to scroll to").scrollIntoView();

0
GameMaster

2019年、

「このサイトはスクロールリンクの位置決め効果を使用しているようです。これは非同期パニングではうまく機能しない可能性があります」スクリプトを使用

https://stackoverflow.com/a/57641938/578132

0
Constantin