bootstrap.js與動畫滾動

我目前使用這個插件scrollspy http://twitter.github.com/bootstrap/javascript.html#scrollspy bootstrap.js與動畫滾動

然而，這並沒有提供一個選項點擊時爲滾動移動設置動畫。我如何添加這個？

2012-01-03 thv20

你應該看看http://plugins.jquery.com/scrollTo/，它應該是非常簡單的與自舉組合。如果您願意，我會很樂意給出更詳細的介紹。

2012-01-03 11:22:41 FlabbyRabbit

多一點幫助會很好！我究竟在哪裏放置了scrollTo命令，例如'$ .scrollTo（'＃'+ target'，1000）;'？ – thv20 2012-01-03 11:54:39

Scrollspy不處理元素的移動，這是由瀏覽器本地完成的。所有滾動間諜都會在用戶滾動時更改所選元素。這是scrollTo的快速實現，應該有所幫助：http://jsfiddle.net/flabbyrabbit/69z7x/ – FlabbyRabbit 2012-01-03 12:22:53

太棒了！最後一個問題，我可以設置頂部偏移量嗎？請參閱這裏以供參考：http://jsfiddle.net/69z7x/5/所以這裏會有一個200px的偏移量。 – thv20 2012-01-03 12:56:51

帶或不帶引導：

<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

爲了防止閃爍閃爍，添加event.preventDefault（） – suda 2013-10-20 17:13:55

這工作完美爲了我！ – Migisha 2014-07-21 19:12:26

這基本上是上述問題的答案的擴展，但我實現了他們稍有不同的更爲綜合的辦法。我不指望任何創意點，但也許這可以幫助某人。

正如在回答上面提到的，添加scrollTo（）腳本：

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

在bootstrap.js文件發現：

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

在變量聲明，對下this.process()添加變量：
this.scroll()

然後正確根據ScrollSpy.prototype.activate功能，並且上面：

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

$.localScroll();

來源

2014-01-19 07:01:23

玉傢伙，不需要增加任何額外的無意義的js插件。

一下添加到身體

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

添加custom.js你的主題，或只是使用其他適當的文件。

添加這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 2014-10-21 06:32:44

bootstrap.js與動畫滾動

回答

相關問題