bootstrap.jsは、私は現在、このプラグインを使用してい

アニメーションスクロールをscrollspyクリックするとスクロールの動きがアニメートされます。これをどのように追加できますか？bootstrap.jsは、私は現在、このプラグインを使用してい

2012-01-03 thv20

http://plugins.jquery.com/scrollTo/をご覧ください。ブートストラップと組み合わせるのは簡単ではありません。あなたが望むなら、私はそれをどうやって実装するかについてもっと詳しく説明します。

2012-01-03 11:22:41 FlabbyRabbit

の代わりに少しより多くの助けを相殺するためにあることを確認してくださいcustom.jsするためにこれを追加素晴らしいことだ！私はscrollToコマンドをどこに置くのですか？ '$ .scrollTo（ '＃' + target '、1000）;'？ – thv20

scrollspyは要素への移動を処理しません。これはブラウザによってネイティブに行われます。すべてのスクロールスパイは、ユーザーがスクロールすると選択した要素を変更します。ここには、スクロールの簡単な実装があります。http://jsfiddle.net/flabbyrabbit/69z7x/ – FlabbyRabbit

Brilliant！ 1つの最後の質問、私はトップオフセットを設定することはできますか？参考までにここをクリックしてください：http://jsfiddle.net/69z7x/5/ここに200pxのオフセットがあります。 – thv20

またはブートストラップなし：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script> 
<script> 
$(function() { 
    $('#yournav').bind('click', 'ul li a', function(event) { 
     $.scrollTo(event.target.hash, 250); 
    }); 
}); 
</script>

出典

2013-03-24 07:51:48 Casey

scrollspyでちらつきを防ぐには、event.preventDefault（）を追加してください – suda

これは完全に機能しました私のために！ – Migisha

これは、基本的には上記の答えを拡張したものですが、私は、より統合的なアプローチのために若干異なり、それらを実装しました。私は独創性の点は期待していませんが、おそらくこれが誰かを助けることができます。上記の回答で述べたように

、scrollTo（）スクリプトを追加：bootstrap.jsファイルの検索]に

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>

：右this.process()の下で、変数宣言で

// SCROLLSPY CLASS DEFINITION 
// ==========================

を追加変数：
this.scroll()

右下の上記機能、および：

// SCROLLSPY PLUGIN DEFINITION 
// ===========================

あなたのスクロールを追加（）メソッド：

ScrollSpy.prototype.scroll = function (target) { 
    $('#spyOnThis').bind('click', 'ul li a', function(event) { 
     $.scrollTo(event.target.hash, 250); 
    }); 
};

これは私のために働きました。上記の助言をお寄せいただきありがとうございます。

出典

2014-01-11 17:46:27

それはjQuery.localScrollと1つのライナーです：

$.localScroll();

出典

2014-01-19 07:01:23

[OK]をみんな、余分な無意味なJSプラグインを追加する必要はありません。

体

<body data-spy="scroll" data-offset="500" data-target="#navbar">

にこれを追加しますが、あなたのテーマにcustom.jsを追加するか、またはちょうど別の適切なファイルを使用します。

// strict just to keep concept of bootstrap 
+function ($) { 
    'use strict'; 


// spy and scroll menu boogey 
$("#navbar ul li a[href^='#']").on('click', function(e) { 

    // prevent default anchor click behavior 
    e.preventDefault() 

    // store hash 
    var hash = this.hash 

    // animate 
    $('html, body').animate({ 
     scrollTop: $(this.hash).offset().top -500 
    }, 1000, function(){ 
     window.location.hash = hash -500 
    }) 

}) 

}(jQuery);

は、あなたが身体に<tag id="#myLink"></tag>と<a href="#myLink>

data-offset="500"を使用して、関数内の-500場所がスクロール

出典

2014-05-28 10:22:18

私のためにアニメーション化されていません。手伝って頂けますか？ – offset

bootstrap.jsは、私は現在、このプラグインを使用してい

答えて

関連する問題