jQueryを使用してページをアンカーまで上下にスクロールする方法は？

176

ページの上または下のローカルアンカーへのリンクをクリックしたときのスライド効果を含める方法を探しています。

あなたがそのようなリンクを持っている何かが欲しい：

<a href="#nameofdivetc">link text, img etc.</a>

おそらくクラスが追加されているので、このリンクをスライディングリンクにしたいことがわかります。

<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>

次に、このリンクをクリックすると、ページが必要な場所（div、見出し、ページの上部など）まで上下にスライドします。

これは私が以前持っていたものです：

    $(document).ready(function(){
    $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home
        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
        var parts = full_url.split("#");
        var trgt = parts[1];

        //get the top offset of the target anchor
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;

        //goto that anchor by setting the body scroll top to anchor top
        $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
    });
});

— ade123
ソース

427

説明

これは、jQuery.offset()およびを使用して行うことができますjQuery.animate()。

jsFiddleのデモをご覧ください。

サンプル

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor('id3');

詳しくは

— dknaack
ソース

52

これはまた、ページ内のすべての内部のアンカーリンクと仕事への一般的な行うことができます：

$("a[href^=#]").click(function(e) {   e.preventDefault();   var dest = $(this).attr('href');   console.log(dest);   $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow'); });

— バルド

@bardo、それはどのように実装されることになっていますか？dkmaackのソリューションをあなたのものに置き換えましたが、スライドはありません（アンカー自体は機能しています）。何が欠けていますか？

— jakub 2015年

1

@bardo history.pushState(null, null, dest);は、デフォルトの場所のハッシュの変更を防止しているときにも追加します

— Mike Causer

7

以下のようなので、最新のjQueryを使用した場合FYI @バルドーのソリューションに加えて、あなたはハッシュをエスケープする必要があり、$（ "[のhref ^ = \\＃]"） stackoverflow.com/questions/7717527/...

— jaegs

1

HTMLと本文の両方をアニメーション化する目的は何ですか？私たちが何をしているのかわからず、ただすべてをしている状況のように見えます。これは複数のスコーリングを開始する可能性がありますか？

— ygoe 2018年

30

（通常のように）href属性が同じ名前のタグidを持つdivにリンクしていると仮定すると、次のコードを使用できます。

HTML

<a href="#goto" class="sliding-link">Link to div</a>

<div id="goto">I'm the div</div>

JAVASCRIPT-（jquery）

$(".sliding-link").click(function(e) {
    e.preventDefault();
    var aid = $(this).attr("href");
    $('html,body').animate({scrollTop: $(aid).offset().top},'slow');
});

— サンティ・ヌニェス
ソース

1

完全に制御できる非常にシンプルでありながら強力なソリューション。私はこの答えがもっと賛成票を得るべきだと思います。

— cronfy

合意された、これが最善の解決策であると私をたくさん助けた

— probablybest

機能しますが、を使用する目的に反しnameます。を使用する<a name="something"></a>と、外部からも参照できますが、ソリューションではそれを提供していません。

— Ramtin、2018年

8

これは私の人生をとても簡単にしました。あなたは基本的にあなたの要素のidタグを入れて、たくさんのコードなしでそれにスクロールします

http://balupton.github.io/jquery-scrollto/

JavaScriptで

$('#scrollto1').ScrollTo();

あなたのhtmlで

<div id="scroollto1">

ここで私はページの一番下にいます

— ボブテノブ
ソース

7

function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id+"");
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}

— イペガサス
ソース

3

本物の質問、+ ""は2行目に何かしますか？

— Robは

@Rob javascriptには文字列補間がないため、次のよう+に文字列またはvars を使用してそれらを連結します"#some_anchor"。本当に、2番目の連結anchor_id + ""は必要ない、と私は信じています。

— onebree 2016

ありがとう@onebreeそれは私が疑問に思っていた2番目の連結だった:)

— Rob

5

また、ターゲットにはパディングがあるため、のposition代わりに使用することも検討する必要がありますoffset。また、ターゲットと重複させたくない潜在的なナビゲーションバーを考慮することもできます。

const $navbar = $('.navbar');

$('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    const scrollTop =
        $($(this).attr('href')).position().top -
        $navbar.outerHeight();

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

— マット
ソース

IMHOは、固定ナビゲーションバーのcssで追加のクラスや煩わしいパディング計算を必要としないため、最良のソリューションです

— KSPR

しかし、これはURLのアンカータグを書き換えません。history.pushState({}, "", this.href);URLを最新の状態に保つために追加

— KSPR '20

3

埋め込みアンカーリンクのすべてを即座にジャンプするのではなくスライドさせるjQueryの私のアプローチ

それは本当にサンティ・ヌニェスの答えに似ていますが、より信頼性があります。

サポート

マルチフレームワーク環境。
ページの読み込みが完了する前。

<a href="#myid">Go to</a>
<div id="myid"></div>

// Slow scroll with anchors
(function($){
    $(document).on('click', 'a[href^=#]', function(e){
        e.preventDefault();
        var id = $(this).attr('href');
        $('html,body').animate({scrollTop: $(id).offset().top}, 500);
    });
})(jQuery);

— ティモ・フオビネン
ソース

2

私は自分の元のコードにこだわっており、このコードを使用して「back-to-top」リンクにフェードインし、ここからも少し追加しました。

http://webdesignerwall.com/tutorials/animated-scroll-to-top

うまくいく:)

— ade123
ソース

1

ページ全体ではなく、ネストされたコンテンツをアニメーション化している場合は、offsetTopとscrollTopの値を追加することをお勧めします。

例：

var itemTop= $('.letter[name="'+id+'"]').offset().top;
var offsetTop = $someWrapper.offset().top;
var scrollTop = $someWrapper.scrollTop();
var y = scrollTop + letterTop - offsetTop

this.manage_list_wrap.animate({
  scrollTop: y
}, 1000);

— TuxujPes
ソース

0

SSスロースクロール

このソリューションではアンカータグは必要ありませんが、メニューボタン（例では任意の属性、 'ss'）をHTMLの宛先要素IDと一致させる必要があります。

ss="about" あなたを連れて行きます id="about"

$('.menu-item').click(function() {
	var keyword = $(this).attr('ss');
	var scrollTo = $('#' + keyword);
	$('html, body').animate({
		scrollTop: scrollTo.offset().top
	}, 'slow');
});

.menu-wrapper {
  display: flex;
  margin-bottom: 500px;
}
.menu-item {
  display: flex;
  justify-content: center;
  flex: 1;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 80%, 1);
  background-color: hsla(0, 0%, 20%, 1);
  cursor: pointer;
}
.menu-item:hover {
  background-color: hsla(0, 40%, 40%, 1);
}

.content-block-header {
  display: flex;
  justify-content: center;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 90%, 1);
  background-color: hsla(0, 50%, 50%, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu-wrapper">
  <div class="menu-item" ss="about">About Us</div>
  <div class="menu-item" ss="services">Services</div>
  <div class="menu-item" ss="contact">Contact</div>
</div>

<div class="content-block-header" id="about">About Us</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="services">Services</div>
<div class="content-block">
Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="contact">Contact</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>

スニペットを展開

フィドル

https://jsfiddle.net/Hastig/stcstmph/4/

— ハスティグ・ツサメンステレン
ソース

0

ここに私のために働いた解決策があります。これはa、名前付きを参照するすべてのタグに対して機能する汎用関数ですa

$("a[href^=#]").on('click', function(event) { 
    event.preventDefault(); 
    var name = $(this).attr('href'); 
    var target = $('a[name="' + name.substring(1) + '"]'); 
    $('html,body').animate({ scrollTop: $(target).offset().top }, 'slow'); 
});

注1："HTMLには必ず二重引用符を使用してください。一重引用符を使用する場合は、コードの上記の部分を次のように変更しますvar target = $("a[name='" + name.substring(1) + "']");

注2：場合によっては、特にブートストラップのスティッキーバーを使用する場合、名前aがナビゲーションバーの下に非表示になります。このような場合（または同様の場合）、スクロールからのピクセル数を減らして、最適な場所を実現できます。たとえば：$('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');に行くことができますtarget上に残された15個のピクセル。

— ラムティン
ソース

0

この例をhttps://css-tricks.com/snippets/jquery/smooth-scrolling/で偶然見つけて、コードのすべての行を説明しました。これが最良の選択肢であることがわかりました。

https://css-tricks.com/snippets/jquery/smooth-scrolling/

あなたはネイティブに行くことができます：

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

window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

またはjqueryで：

$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {

    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) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
      }
    }
  });

— フランキー
ソース

0

わかりました最も簡単な方法は次のとおりです：-

クリック関数内（Jquery）：-

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

HTML

<div id="resultsdiv">Where I want to scroll to</div>

— Mikeys4u
ソース

-1

$(function() {
    $('a#top').click(function() {
        $('html,body').animate({'scrollTop' : 0},1000);
    });
});

ここでテストしてください：

http://jsbin.com/ucati4

— サビシン
ソース

3

署名、リンクには特にもの...とは含めないでください特に無関係なリンクを持つものを。このようなことをプロフィールに入れることができます。

— アンドリューバーバー

質問されたのは、ページの上部にスクロールする方法ではなく、IDのアンカーにスクロールする方法

— でした

WordPressでそれを使用する方法はありますか？サイトに追加していますが、実際には機能しません。ここでのリンク：scentology.burnnotice.co.za

— ユーザーエージェント

-1

次の解決策は私のために働きました：

$("a[href^=#]").click(function(e)
        {
            e.preventDefault();
            var aid = $(this).attr('href');
            console.log(aid);
            aid = aid.replace("#", "");
            var aTag = $("a[name='"+ aid +"']");
            if(aTag == null || aTag.offset() == null)
                aTag = $("a[id='"+ aid +"']");

            $('html,body').animate({scrollTop: aTag.offset().top}, 1000);
        }
    );

— Behrouz.M
ソース