jQuery scrollTop goes to wrong anchor

Question

I have been trying to troubleshoot the problem but I can't find what's wrong. I simply want to scroll to a <section> element with a specific ID whenever a link is clicked. There are many sections on the page. But somehow every time any of the link is clicked the page scrolls to the first section and not the correct one.

Here is the HTML :

<ul class="menu fsMed lightFont horizontal" id="peopleMenu">        
    <li><a class="currentColor" href="#pageIntroHead">All</a></li>
    <li><a class="currentColor" href="#principle_associates">Principle Associates</a></li>
    <li><a class="currentColor" href="#executive_associates">Executive Associates</a></li>
    <li><a class="currentColor" href="#senior_associates">Senior Associates</a></li>
    <li><a class="currentColor" href="#associates">Associates</a></li>
</ul>

Here is the JQuery code:

jQuery(document).ready(function($) {
    jQuery('#peopleMenu li a').click(function(e) {
        e.preventDefault();

    console.log(jQuery(this).attr('href'));
      jQuery('html, body').animate({
        scrollTop: jQuery( jQuery.attr(this, 'href') ).offset().top
    }, 500);
    return false;
  });
});

I guess the problem isn't with JQuery code but something conflicts with it. Here is the URL depicting the problem : http://jla.ma-digital.net/team-structure/

At top right you see the links Executive Associates etc.

Any Help would be Appreciated.

Thanks

score 2 · Answer 1 · edited May 23 '17 at 12:32

2

The issue here is, your sections only contain floated elements which aren't cleared. So you have a bunch of sections each with a 0px height and they are positioned in exactly the same place on the page.

Clear any floats within the sections to fix this. You could use the following CSS:

.pplSection:before,
.pplSection:after{
    content: '';
    display: table;
}

.pplSection:after{
    clear: both;
}

edited May 23 '17 at 12:32

Community

1
1

answered Jul 26 '16 at 11:29

George

36,413
9
66
103

You are a life saver George :) – Ahmar Ali Jul 26 '16 at 11:34
Glad I could help Ahmar. – George Jul 26 '16 at 11:34

score 0 · Answer 2 · answered Jul 26 '16 at 11:34

0

This might be help you

make display inline-block for the sections

section.pplSection {
    display: inline-block;
}

but the center alignment will change , you have to design according to that.

answered Jul 26 '16 at 11:34

Maharajan

178
9

jQuery scrollTop goes to wrong anchor

2 Answers2