search

cferdinandi / smooth-scroll

A lightweight script to animate scrolling to anchor links.
MIT License
5.49k stars 863 forks source link

Smooth-scroll interfering with bootstrap dropdown menu #65

Closed jucks closed 10 years ago

jucks commented 10 years ago

I successfully added smooth-scroll to my html, but it messed up the dropdown button. Since the bootstrap drowdown menu also uses a href="#", it gets picked up by smooth scroll and disables the script for the dropdown. Is there a way to get around this?

cferdinandi commented 10 years ago

There is, actually, as both Bootstrap and Smooth Scroll let you trigger events independently.

I'm assuming you have a fixed header? What's the exact behavior you're looking for? Example:

  1. Click dropdown item.
  2. Menu expands.
  3. Page scrolls but dropdown remains open.
jucks commented 10 years ago

Hi cferdinandi!

Actually, it disables all other buttons. As in, my on-click dropdown does not expand, AND neither do the next/previous buttons on my carousel. Not even the pagination under the carousel works. Not sure what the work around to this is, as I am very new to js.

cferdinandi commented 10 years ago

Hmm... it should only have that effect on links with the data-scroll data attribute added. Are you adding data-scroll to your drop down links, or is it affecting even the ones that don't have that attribute? Could you provide a link to demo so I can test?

jucks commented 10 years ago

Let me work on that and get back to you. And no, I'm not adding data-scroll to my other links. I found someone online was having the same problem, and he fixed it with the following code:

$scrollableElement.on('click.bootstrap-anchors', 'a[href*="#"]:not([data-toggle],[data-target],[data-slide])', function(e) { this.scrollTo(e); });

but this didn't seem to work for me either.

Here is my test page: http://www.gdc.travel/test.html

Thanks for all the help!

cferdinandi commented 10 years ago

Just took a look at the console window and it looks like your problem is related to jQuery and Bootstrap.

screen shot 2014-05-22 at 11 33 38 am

You're loading jQuery, but you're calling it after Bootstrap's JS tries to load. Put jQuery first and things should start working again (and don't forget to remove that weird line you added from Smooth Scroll).

jucks commented 10 years ago

Huh, now I feel dumb=) Moving the jQuery call just 4 lines up fixed everything, thanks a lot man! I just don't get how it used to work just fine until now? It was always the last line of code and it worked. Is there a technical/logical explanation behind this? Just curious. Cheers!

cferdinandi commented 10 years ago

Not one that I can think of... but glad you got it fixed!