1

I have a list of buttons that are created from a loop. These buttons when clicked display different data (child page content) below in a block. Each button shows data from a different child page.

So the button has a class of .service-tab Content block has a class of .services-content

I have tried jQuery as follows:

$('.service-tab').click(function() {
    $('html,body').animate({
        scrollTop: $(".services-content").offset().top},
'slow');

These seems to work for any button that i click first. then when i scroll the page back up to click another button instead of going back down again so that the .services-content aligns with the top of the page again it does down and the more you click any button the page goes down again. (randomly depending on the position of the page if you click a button it will work as expected again).

i am assuming that due to the JS firing up its taking note of page position and moving depending on this?

Richard
  • 638
  • 1
  • 7
  • 22
  • 1
    So you have multiple elements with the class `services-content`? How would it know which one to scroll to based on this code? – APAD1 Oct 22 '15 at 16:37
  • @APAD1 - Good point. each of the elements are hidden which would be the reason its going all over the place. I've just targeted the Id instead which has now resolved the problem. its nearly 6pm.. think I'm tired. thank you for the help – Richard Oct 22 '15 at 16:52

1 Answers1

0

Do it old school, use anchors. Your buttons will all be <a href="#someElementId">, and your targets should use an id instead of (or in addition to) a class. No jQuery or JavaScript required.

gilly3
  • 78,870
  • 23
  • 132
  • 169
  • I would need it to make sure that the div is aligned to the top. anchors don't always allow this functionality. – Richard Oct 22 '15 at 16:40
  • The only reason an anchor wouldn't be aligned to the top is if there isn't enough content below it to allow the page to scroll that far. You'd have the same problem with any JavaScript solution. – gilly3 Oct 22 '15 at 19:53