jQuery / Javascript滚动到只有类元素的页面中的div

Question

I'm know you can scroll to different parts of a webpage using id and name elements, but I've got some different here. I'm using a WordPress theme from Croma called Dumanis and their div only offer classes, not Id's. So I'm trying to figure a way to click on something in the navigation menu to take people to the proper div class element. How would I accomplish that? I see a lot of people refer to scrollTop but in this case, I don't want it to scroll completely to the top or the top social media bar will cover part of the div up. What to do?

Here's the page so far: http://www.aishla.com/blog/2014/my-aish/

Answer 1

You can use .eq() to grab the elements from the UL list that contains the links, then you can use contains() to grab the text of the H2 elements that divide the sections, here's a mockup:

jQuery('#sub-nav a').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTop(jQuery('h2:contains("Contact")').offset().top - jQuery('h2:contains("Contact")').outerHeight());
});

Of course, this just takes every link to the contact portion, but you can easily abstract from this.

Plug it into the console and you'll see.