smooth scroll and accordion conflict bootstrap

Question

although this has been asked a few times I haven't found something which will fix my problem.

This is my code for the smooth scroll:

$(function() {
  $('a[href*=#]:not([href=#]),a[href*=#]:not(a[data-toggle])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

it's css-tricks code with a bit of editing. This is the site: http://redrocketwebsitedesign.co.uk/test/my3DtwinAlpha/about/#arrow6

So the accordion is still being selected for the scrolling, and it's not running the accordion js. I think there's a problem with my javascript not selector code : a[href*=#]:not(a[data-toggle])

Any help appreciated :-]

score 6 · Answer 1 · answered Jun 17 '16 at 08:15

This is what you are really looking for :

$('a[href*="#"]:not([href="#"]):not([data-toggle])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

:not([data-toggle]) is to avoid smooth scroll with bootstrap tab, carousel etc...

https://stackoverflow.com/a/7717572/1720476 togehter with `:not([data-toggle])` is perfect — Arnis Juraga, Oct 17 '17 at 23:09

score 0 · Accepted Answer · answered Feb 02 '14 at 00:30

0

The page you provided has a mistake in code:

$('a[href*=#]:not([href=#]),'a[href^="#"]:not([data-toggle])').click(function() {
                           ^^^ - extra and unnecessary character

So your handler is not set.

answered Feb 02 '14 at 00:30

Tony

7,345
3
26
34

cptstarling · Answer 3 · 2014-12-19T14:30:03.677

You can also consider specifying the class of the element(s) that should trigger a smooth scroll animation (thus excluding others, such as the accordion tabs), like this:

$('a[href*=#][class*="smooth"]:not([href=#])').click(function()

Or vice versa, specify the class of the element(s) that shouldn't trigger the script (in this case we exclude the class of the links that trigger the accordion effect):

jQuery('a[href*=#]:not([href*=#][class*="accordion-toggle"])').click(function()

score 0 · Answer 4 · answered Oct 11 '18 at 05:36

var headp = $(".pixxett-header").innerHeight(); var stick = $(".pixxett-header.sticky").innerHeight();

$(document).on('click', 'a[href^="#"]:not([href="#"]):not([data-toggle])', function (event) {
event.preventDefault();

if (scroll == 0){
    $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top - stick}, 500);
}else{

$('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top - headp}, 500);
}

});

smooth scroll and accordion conflict bootstrap

4 Answers4