bootstrap.js scrollspy with animated scroll

Question

I'm currently using this plugin: http://github.com/davist11/jQuery-One-Page-Nav

but would prefer to switch to using Twitter's Bootstrap.js Scrollspy: http://twitter.github.com/bootstrap/javascript.html#scrollspy

However, this doesn't offer an option to animate the scroll movement when clicked. How can I add this?

score 13 · Accepted Answer · edited Jul 11 '15 at 09:38

13

You should take a look at http://plugins.jquery.com/scrollTo/, it should be faily simple to combine with bootstrap. I will happily give a more detailed explination on how to implement it if you would like.

edited Jul 11 '15 at 09:38

Shaiju T

6,201
20
104
196

answered Jan 03 '12 at 11:22

0x6C77

939
3
13
36

1

A little more help would be great! Where exactly do I put the scrollTo command, e.g. `$.scrollTo('#'+target', 1000);`? – thv20 Jan 03 '12 at 11:54
3

The scrollspy doesn't handle the movement to the element, this is done natively by the browser. All scroll spy does is change the selected element as the user scrolls. Here is a quick implementation of scrollTo that should help: http://jsfiddle.net/flabbyrabbit/69z7x/ – 0x6C77 Jan 03 '12 at 12:22
1

Brilliant! One final question, can I set a top-offset? Please see here for reference: http://jsfiddle.net/69z7x/5/ So here there'd be a 200px offset. – thv20 Jan 03 '12 at 12:56
2

Try this: `$.scrollTo(target, 1000, {offset:-200});` – 0x6C77 Jan 03 '12 at 13:21
That takes care of `scrollTo`, but the nav highlight is now 200px out of sync. Any ideas? Thanks for your continued help! – thv20 Jan 03 '12 at 13:44
Found it! Edited the `processScroll` function in `bootstrap-scrollspy.js` to match. Thanks again! – thv20 Jan 03 '12 at 13:47
The way I would do it would be to change `return $(id).offset().top` to `return $(id).offset().top-200` in this.offsets ... but I am sure your solution is just as good – 0x6C77 Jan 03 '12 at 13:56
5

no need to update any functions, you can just add `data-offset="200"` to the `body` – Philipp Kyeck Jun 16 '12 at 12:33

score 7 · Answer 2 · answered Mar 24 '13 at 07:51

7

With or without bootstrap:

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

answered Mar 24 '13 at 07:51

Casey

1,802
3
22
35

To prevent flickering with scrollspy, add event.preventDefault() – suda Oct 20 '13 at 17:13

dbstyle.pl · Answer 3 · 2014-05-28T10:30:14.950

Ok guys, no need to add any extra pointless js plugins.

Add this to body

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

Add custom.js to your theme or just use another proper file.

Add this to 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);

Be sure you use <tag id="#myLink"></tag> and <a href="#myLink>

data-offset="500" in body and -500 places in function are to offset place of a scroll

It not animate for me. Can you help me? – offset Oct 21 '14 at 06:32 — offset, Oct 21 '14 at 06:32

score 2 · Answer 4 · answered Jan 19 '14 at 07:01

2

It's a one liner with jQuery.localScroll:

$.localScroll();

answered Jan 19 '14 at 07:01

Jake Stoeffler

2,662
24
27

score 1 · Answer 5 · answered Jan 11 '14 at 17:46

This is basically an extension of the answers above but I implemented them slightly differently for a more integrated approach. I don't expect any points for originality but maybe this can help someone.

As mentioned in the answer above, add the scrollTo() script:

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

In the bootstrap.js file find:

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

In the variable declarations, right under this.process() add the variable:
this.scroll()

Then right under the ScrollSpy.prototype.activate function, and above:

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

add your scroll() method:

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

This worked for me. Thanks again for helpful advice up above.

bootstrap.js scrollspy with animated scroll

5 Answers5

Linked