jQuery Smooth Scroll
[resolved] Conflict with Bootstrap tabs (3 posts)

  1. Eliot Akira
    Posted 2 years ago #

    I love how simple and useful this plugin is. But I noticed that my tabs stopped working - Bootstrap uses anchors to switch between tabs, and somehow this plugin (as well as Easy Smooth Scroll by itself) disables the tabs' anchors.

    Any idea how I could get around this? One way is to filter this plugin out on the page that's using tabs, but then the scroll to top wouldn't show up either..


  2. Eliot Akira
    Posted 2 years ago #

    OK, I figured out a way to let the plugin not conflict with Bootstrap tabs.

    In the plugin folder, js/jss-script.min.js, I changed this part:


    to be:


    Then, for each tab, add the class "navtab" to prevent smooth scroll from blocking it. For example: <a href="#tab-2" data-toggle="tab" class="navtab">

    Another thing I noticed was that Bootstrap carousel also uses anchors, and this smooth scroll plugin blocks them. To prevent that, change the above part of jss-script.min.js to be:

    if(n.href&&n.className!='navtab'&&n.className!='right carousel-control'&&n.className!='left carousel-control'&&n.href.indexOf("#")!=-1

    There might be a better way to do this, but for now it's a working fix.

  3. ndsailor
    Posted 2 years ago #

    Thanks for the lead... I seem to have come up with a slightly simpler method that doesn't require any additional changes to bootstrap tab set-up.

    Just get more specific with the .indexOf("#")!=-1 to a <div> with a specific ID at the top of the page. In my case it was .indexOf("#header_full")!=-1

    I also edited the display_link function in the main php file, but it seemed to work even without that edit.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • jQuery Smooth Scroll
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.