CODEWITHSUNDEEP
jqueryscroll
user1185135
user1185135

Reputation:

Scrolling to an element on click

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?

Upvotes: 1

Views: 3389

Answers (2)

Anujith
Anujith

Reputation: 9370

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);
  }
});

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

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

Upvotes: 0

Related Questions