div id jQueryへのスムーズスクロール


248

div id jqueryコードへのスクロールが正しく機能するようにしています。別のスタックオーバーフローの質問に基づいて、私は以下を試しました

デモhttp://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

しかし、それはうまくいきませんでした。divにスナップします。私も試しました

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

進展なし。



@TheVanillaThrillaやりましたが、シングルリンクの使用には肥大化しているようです
StevenPHP '25

1
@StevenPHP、私は私の答えstackoverflow.com/a/26129950/947687に従ってあなたの例のJavaScriptコードを置き換えました。そして、それはjsfiddle.net/8tLdq/643で動作します
dizel3d 2014

OPは古いですが、SEから来た他の人のためにこの投稿を共有します。:ここでは記事は、問題を解決するシェア簡単な関数ということですsmartik.ws/2015/01/...
アンドリューSurdu

回答:


667

あなたはアニメートする必要があります html, body

デモhttp://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

9
@vector問題が1つあります。クリックすると、jqueryで上にスクロールする必要があります。解決策はありますか?
YesItsMe 2015

@yesitsme ...私の場合は上または下
Grey Spectrum

@GraySpectrumは、クリックした直後のみ、遅延があるように聞こえます。
YesItsMe 2016年

1
同じ質問があります。別の場所にスクロールする必要のあるボタンがいくつかある場合、このコードを変更してみましたが機能しません。別の例を挙げていただけますか?
Dreadlord

いくつかの「修正」が見つかりました。スクロール適切な要素が修正されましたが、それでもそれは同じ「スクロールに」ターゲットをクリックして上下に行く:var target = $(this).data("target"); $(".basics-content").animate({scrollTop: $(target).offset().top}, 1000); });説明:.basics-content私は実際にスクロールしたいモーダルの内側のdiv要素がある、とtarget私はID番号を提供します要素の...
ローランド

111

スムーズなスクロールのためにHTMLマークアップを変更せずに、ページ上の標準のhref-idナビゲーションをオーバーライドする場合は、次のようにします():

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

3
これはうまく機能します。非常に小さな調整var pos = $(id).offset().top;が可能かもしれませんvar pos = $id.offset().top;
Davey

非常に素晴らしい。これを特定のリンクでのみ発生させたい場合(情報を表示または非表示にするものがある場合など)は、クラス名をリンクに追加し、クラス名(スクローラーなど)を一致宣言の最後に追加します(例:a [href ^ = "#"]。scroller)。
Privateer 2017

jQueryなしでそれをどのように行うのですか?
Vadorequest

21

これが私の2セントです。

JavaScript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

HTML:

<a class="scroll" target="contact">Contact</a>

そしてターゲット:

<h2 id="contact">Contact</h2>

これは、doctypeを宣言しない場合にのみ機能します。
David Martins

6
evalここの用途は何ですか?
シーア

$('html, body').animateスクロールする必要があると思います
Irshad Khan

6

これが私が使うものです:

<!-- jquery smooth scroll to id's -->   
<script>
$(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
        }, 500);
        return false;
      }
    }
  });
});
</script>

これの利点は、ハッシュリンクと対応するIDを無制限に使用できることです。それぞれに新しいスクリプトを実行する必要はありません。

WordPressを使用している場合は、テーマのfooter.phpファイルのbody終了タグの直前にコードを挿入します</body>

テーマファイルにアクセスできない場合は、コードを投稿/ページエディター(テキストモードで投稿を編集する必要があります)内に埋め込むか、すべてのページに読み込まれるテキストウィジェットに埋め込むことができます。

他のCMSまたはHTMLのみを使用している場合は、すべてのページに読み込まれるセクションのbodyの終了タグの直前にコードを挿入できます</body>

これに関する詳細が必要な場合は、こちらのクイックポストをチェックしてください:jQuery smooth id to id

お役に立てれば幸いです。質問がある場合はお知らせください。


これがどれほどシンプルでバニラなのかを愛する、完璧です。
DoPeT 2015

5

もう1つの例:

HTMLリンク:

<a href="#featured" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTMLアンカー:

  <div id="featured">My content here</div>

3

jQuery scrollToプラグインファイルを読み込んでいますか?

オブジェクトを取得している可能性があります:コンソールで「scrollTo」エラーが見つかりません。

scrollTOメソッドはネイティブのjqueryメソッドではありません。これを使用するには、jquery scroll Toプラグインファイルを含める必要があります。

ref:http : //flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln:これをヘッドセクションに追加します。

<script src="\\path\to\the\jquery.scrollTo.js file"></script>

これは受け入れられるべき答えでした。問題のコードは正しく、正常に動作します。scrollToプラグインが機能していない/機能していないように見えます。。彼は似たようなことをするためのさまざまな方法について尋ねませんでした。
クリスカバナ2016

3

このスクリプトは、ベクターのスクリプトを改良したものです。少し変更しました。したがって、このスクリプトは、page-scrollクラスが含まれるすべてのリンクで機能します。

最初は緩和なしで:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

イージングには、Jquery UIが必要です。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

これをスクリプトに追加します。

'easeOutExpo'

最後の

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

ここで見つけることができるすべてのイージング:チートシート


3

このコードは、ウェブ上のすべての内部リンクに役立ちます

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });

1

これは、次の単純なjQueryコードを使用して行うことができます。

チュートリアル、デモ、ソースコードはここから見つけることができます-jQueryを使用してdivにスムーズにスクロールします

JavaScript:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML:

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>

1

ここで私はこれを試しました、それは私にとって素晴らしい仕事です。

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

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML:

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>

あなたの答えは何が違うのですか?
yunandtidus



0

これでうまくいきます。

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

ありがとう。


0

固定ヘッダーがあり、その下でスクロールしないようにした場合に、jQueryを使用してdiv / anchorにスムーズにスクロールするための私の解決策を次に示します。他のページからリンクしても動作します。

「.site-header」をヘッダーを含むdivに置き換えるだけです。

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
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 - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.