I am not a programmer, but I write HTML & CSS daily and can usually cobble JavaScript and PHP together. Please explain answers in terms that a designer can understand, thanks! :)

I’m working on making our site more usable, and I have run into issues with the fixed header and various page anchors. I added a script to create smooth scrolling and adjust for the fixed header height. The problem is that I’m using the Visual Composer plugin on a WordPress installation, and one of our tabbed page elements is not working correctly with the new script:

https://newstart.staging.wpengine.com/treatment/mental-health/ocd/

Check out the OCD Subtypes near the bottom. When clicking the tab anchor links for the subtypes, the tab’s div jumps behind the header. Before adding the script, the element would stay static and flip between tabs normally.

We really need this script though, so I’d like to add a class or ID filter for these tab links. That way they are excluded from the script entirely. I’ve tried .not() and :not() selectors but have had no success. Here is the script (taken from here):

$('a[href^="#"]').on('click', function(e) {
var hash  = this.hash,
    $hash = $(hash),
    addHash = function() {
        window.location.hash = hash;
    };

if ( hash !== '#header' ) {
    $('html,body').animate({ 'scrollTop': $hash.offset().top -50 }, 500, addHash);
} else {
    $('html,body').animate({ 'scrollTop': $hash.offset().top }, 500, addHash);
}
e.preventDefault();
});

Read more here: Add Element ID Filter to jQuery Script for Page Anchors


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: