HTMLページを指定されたアンカーまでスクロールする方法は?


264

JavaScriptを使用するだけで、ブラウザーでページを特定のアンカーにスクロールできるようにしたいと思います。

HTMLコードでnameまたはid属性を指定しました:

 <a name="anchorName">..</a>

または

 <h1 id="anchorName2">..</h1>

に移動して得られるのと同じ効果を得たいのですがhttp://server.com/path#anchorName。アンカーがページの表示部分の上部近くになるように、ページをスクロールする必要があります。

回答:


349
function scrollTo(hash) {
    location.hash = "#" + hash;
}

jQueryはまったく必要ありません。


91
実際にはスクロールしませんが、ジャンプするだけです。その時点で、アンカーにリンクすることもできます<a href="#anchorName">link</a>
Ryan

52
これは一度だけ機能することに注意してください。ハッシュが設定されると、ダミーのハッシュに変更して再度設定しない限り、ページは同じハッシュにスクロールしません。
クリスティアンヴラビー2014年

13
scrollToはすでにグローバルウィンドウオブジェクトによって使用されているため、使用しないでください。また、location.hashも定義されているため、パラメーターの名前をhashにしないでください。このコードを使用できます:function scrollToHash(hashName) { location.hash = "#" + hashName; }
Markus Zeller

3
@MarkusZeller、パラメーターをハッシュと呼ばない方がいいのはなぜですか?位置と衝突しないんですよね?
ガーマン、2016

3
「scroll-behavior:smooth;」を設定すると、これはスクロールします。html要素
スタッカー

225

より簡単:

var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();

22
最初はMandxがトローリングしていると思っていたので、これを試してみました。私の前では、この方法に出くわしたことがありませんでした。 このメソッドのMozillaドキュメント。また、これはブラウザで非常によくサポートされるようです。
Jonathan Dumaine 2013

2
スクロールしないjqueryソリューションで多くの問題が発生しました。これは私に多くのフラストレーションを救いました。
NuclearPeon 2014

1
警告!このメソッドは、その上のdivにフローティング要素が含まれていてサイズを簡単に決定できない場合に問題が発生する可能性があります。
vogomatix 2017年

5
これはクリーンなソリューションですが、現時点では微調整はできず、ハードスクロールします。オプションの実験的なパラメーターscrollIntoViewOptionsがありbehavior: "smooth"ますが、現在はFirefoxとのみ互換性があります。
ロチャ2017年

これをアニメーション化する方法は?
SkuraZZ

124

あなたはjQuerysを使用することができます.animate() .offset()scrollTop。お気に入り

$(document.body).animate({
    'scrollTop':   $('#anchorName2').offset().top
}, 2000);

リンクの例:http : //jsbin.com/unasi3/edit

あなたはアニメーションの使用したくない場合.scrollTop()のような

$(document.body).scrollTop($('#anchorName2').offset().top);

またはネイティブのlocation.hashようなJavaScript

location.hash = '#' + anchorid;

1
<h1 id="anchorName">またはを見つけるセレクタを作成する限り、最初にIDで要素を検索し、見つからない場合にのみaを検索する<a name="anchorName">を使用する$('#'+hash+',a[name='+hash+']')か、わずかに最適化$(document.getElementById(hash) || 'a[name='+hash+']')します。
gnarf 2010

@gnarf-jQueryで「#」セレクターを最適化する必要はありません-すでに最適化されています。jQueryのソースコードを読んだかどうかを確認するのはかなり簡単です。
CodeJoust 2013年

3
@CodeJoust-私はjQueryチームに所属しており、何度も読んだことがあり、はい$("#selector")は最適化されていますが$("#selector,a[name='selector']")、同じ最適化をすぐには実行できません。私の2.5年前のコメントは少し奇妙に聞こえると思います。「最適化」はa[name='selector']、IDが見つかった場合に検索を回避するものであり、IDの検索を最適化するものではありません。
gnarf 2013年

1
私はこのアプローチで運がよかった:<a data-hash="about"> About </a> <script> $( "[data-hash]")。click(function(){var data = $(this) .attr( "data-hash"); $(document.body).animate({'scrollTop':$( "#" + data).offset()。top}、500);}); </ script>
Jazzy 2013

33

jAndyによる素晴らしい解決策ですが、スムーズスクロールはFirefoxでの動作に問題があるようです。

このように書くことは、Firefoxでも機能します。

(function($) {
    $(document).ready(function() {
         $('html, body').animate({
           'scrollTop':   $('#anchorName2').offset().top
         }, 2000);
    });
})(jQuery);

最新のChromeリリースでは、これが一貫して機能する唯一の方法です。先端をありがとう!
gaborous

32

2018-2020 Pure js:

要素までスクロールする非常に便利な方法があります。

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

しかし、私が理解している限り、彼には以下のオプションほど良いサポートはありません。

ここに画像の説明を入力してください

メソッドの詳細をご覧ください。


要素が一番上にある必要がある場合:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Codepenのデモ例


要素を中央に配置する場合:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Codepenのデモ例


サポート:

введитесюдаописаниеизображения

彼らはそれをscrollと同じ方法で書いていますが、scrollToサポートはでよりよく示されscrollToます。

メソッドの詳細


このソリューションは非常にうまく機能します!共有してくれてありがとう!
熱心な

29

JQueryを使用しない純粋なJavaScriptソリューション。ChromeおよびIeでテスト済み、IOSではテストされていません

function ScrollTo(name) {
  ScrollToResolver(document.getElementById(name));
}

function ScrollToResolver(elem) {
  var jump = parseInt(elem.getBoundingClientRect().top * .2);
  document.body.scrollTop += jump;
  document.documentElement.scrollTop += jump;
  if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
    elem.lastjump = Math.abs(jump);
    setTimeout(function() { ScrollToResolver(elem);}, "100");
  } else {
    elem.lastjump = null;
  }
}

デモ:https : //jsfiddle.net/jd7q25hg/12/


1
古いトピックについてコメントしたことをお詫びしますが、私のプロジェクトではJQueryを使用していないため、これが私にとって最も効果的です。私が気づいた唯一の問題は、最上部までスクロールすると5ピクセルほど見逃していることです。
AntBirch

純粋なjsバージョンを表示するために非常に更新されます。私は生徒に常に内部を見て、JQueryが彼らのために何をするかを理解するように教えています。これは良い例です。
Dave Everitt 2017

2
これは受け入れられる答えになるはずです。これは純粋なjsの例であり、望ましいスクロールアニメーション効果を実現します。タイムアウト値を20に調整したところ、問題なく動作しました。
Mark Ba​​rrasso、2017

純粋なJavaScriptソリューションが大好きです
R01010010

2
IOSで動作するだけでテストされています。
Debbie Kurth

23

2018年には、このような単純なものにjQueryは必要ありません。組み込みscrollIntoView()メソッドはbehavior、ページ上の任意の要素にスムーズにスクロールするための" "プロパティをサポートしています。ブラウザのURLをハッシュで更新してブックマーク可能にすることもできます。

HTMLブックマークをスクロールする上でこのチュートリアル、ここに自動的にページ上のすべてのアンカーリンクにスムーズスクロールを追加するためのネイティブな方法は次のとおりです。

let anchorlinks = document.querySelectorAll('a[href^="#"]')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener('click', (e)=> {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

2
jQueryへの依存を取り除く優れた回答
zai chang

うわー!素晴らしい作品!
Alexandru Trandafir Catalin

14

適切な位置までスムーズにスクロール(2019)

正しい y座標を取得して使用するwindow.scrollTo({top: y, behavior: 'smooth'})

const id = 'anchorName2';
const yourElement = document.getElementById(id);
const y = yourElement.getBoundingClientRect().top + window.pageYOffset;

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

オフセットあり

scrollIntoViewも良いオプションですが、完全に機能しない場合もあります。たとえば、追加のオフセットが必要な場合。ではscrollTo、あなただけの、このようにオフセットすることを追加する必要があります。

const yOffset = -10; 

window.scrollTo({top: y + yOffset, behavior: 'smooth'});

私はあなたのCSSスタイルファイルに以下を追加すべきだと思う: css html { scroll-behavior: smooth; }
parismiguel

5
$(document).ready ->
  $("a[href^='#']").click ->
    $(document.body).animate
      scrollTop: $($(this).attr("href")).offset().top, 1000

5

CSS-Tricksのソリューションは、jQuery 2.2.0では機能しなくなりました。セレクタエラーがスローされます。

JavaScriptランタイムエラー:構文エラー、認識できない式:a [href * =#]:not([href =#])

セレクターを変更して修正しました。完全なスニペットは次のとおりです。

$(function() {
  $("a[href*='#']:not([href='#'])").click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
 });
});

4

ほとんどの答えは不必要に複雑です。

ターゲット要素にジャンプするだけの場合は、JavaScriptは必要ありません。

# the link:
<a href="#target">Click here to jump.</a>

# target element:
<div id="target">Any kind of element.</div>

アニメーションターゲットまでスクロールしたい場合は、@ Shahilの回答を参照してください。


ただし、動的に行う必要がある場合もあります。つまり、ユーザーが直接操作する必要はありません。それがOPが望んでいることだと思います。
jpaugh 2015

1
はい、明らかにOPは既にアンカーリンク機能を認識していました。
isherwood 2016


3

これは、ページをアンカーまでスクロールする作業スクリプトです。設定するには、アンカーリンクに、スクロール先のアンカーのname属性と一致するIDを指定します。

<script>
jQuery(document).ready(function ($){ 
 $('a').click(function (){ 
  var id = $(this).attr('id');
  console.log(id);
  if ( id == 'cet' || id == 'protein' ) {
   $('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow'); 
  }
 }); 
});
</script>

2

これは本当に古い質問ですが、css-tricksに簡単でシンプルなjQueryソリューションが見つかりました。それは私が今使っているものです。

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

1
jquery 2.2.0でセレクターが例外をスローしています。0x800a139e-JavaScriptランタイムエラー:構文エラー、認識されない式:a [href * =#]:not([href =#])
Bill Shihara

2

jQuery("a[href^='#']").click(function(){
    jQuery('html, body').animate({
        scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
    }, 1000);
    return false;
});


2

vue2ソリューション...単純なデータプロパティを追加して、更新を強制します

  const app = new Vue({ 
  ... 

  , updated: function() {
           this.$nextTick(function() {
           var uri = window.location.href
           var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
           if ( String(anchor).length > 0 && this.updater === 'page_load' ) {
              this.updater = "" // only on page-load !
              location.href = "#"+String(anchor)
           }
         })
        }
     });
     app.updater = "page_load"

 /* smooth scrolling in css - works in html5 only */
 html, body {
     scroll-behavior: smooth;
 }

0

ブラウザーでページを特定のアンカーまでスクロールさせる最も簡単な方法は、style.css * {scroll-behavior:smooth;}を入力して、HTMLナビゲーションで#NameOfTheSectionを使用することです。

*{scroll-behavior: smooth;}
<a href="#scroll-to">Home<a/>

<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>

<section id="scroll-to">
<p>it will scroll down to this section</p>
</section>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.