Scrolling to an element on click

Question

I've got the following problem:

I've got a button:

<div id="meerinfotoestel">
   <a id="scroll-to-meerinfo" href="#meerinfo">
      Meerinfo
   </a>
</div>

And I've got some tabs setup with the following name:

.woocommerce-tabs

Now I want the screen to scroll to the tabs, onclick.

I've got the following script:

<script>
$(document).ready(function () {  
    $('#scroll-to-meerinfo').click(function(event){
    event.preventDefault();
    scrollToElement('.woocommerce-tabs');
});
</script>

Apparently the only thing that this does is put an anchor after the url.

Can anyone help me fix this?

You can try to borrow some concepts from here - http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — klewis, Mar 12 '13 at 12:46
This should help too: http://stackoverflow.com/questions/7316027/jquery-jscrollpanes-scrolltoelement — Joe Spurling, Mar 12 '13 at 12:47
@LodewijkWensveen - Then, please tell us, how did you solve the problem? — Amir, Mar 12 '13 at 13:10
Ofcourse, I took this code from the first link provided: $(document).ready(function (){ $("#click").click(function (){ //$(this).animate(function(){ $('html, body').animate({ scrollTop: $("#div1").offset().top }, 2000); //}); }); }); — , Mar 12 '13 at 14:11

score 1 · Answer 1 · answered Mar 12 '13 at 12:51

See this: Sample

$(document).ready(function () {
  $('#scroll-to-meerinfo').click(function (event) {
    event.preventDefault();
    scrollToElement($('.woocommerce-tabs'));
  });

  function scrollToElement(elem) {
    $('body').animate({
        scrollTop: elem.offset().top
    }, 2000);
  }
});

score 0 · Accepted Answer · answered Mar 12 '13 at 12:49

0

Try this:

$(document).ready(function () {  
    $('#scroll-to-meerinfo').click(function(event){
      event.preventDefault();
      $('#woocommerce-tabs').scrollIntoView(true);
      // let your tab id is woocommerce-tabs
    });
});

Syntax of scrollIntoView

element.scrollIntoView(alignWithTop);

Read Docs https://developer.mozilla.org/en-US/docs/DOM/element.scrollIntoView

answered Mar 12 '13 at 12:49

Rohan Kumar

38,998
11
69
99

1

TypeError: $(...).scrollIntoView is not a function – Mar 12 '13 at 13:01
Do you add `id attribute` in your `tab`? – Rohan Kumar Mar 12 '13 at 13:18

Scrolling to an element on click

2 Answers2