jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]

Question

When I click on a button i want to be able to jump down or scroll to a specific div or target on the page.

$('#clickMe').click(function() {     //jump to certain position or div or #target on the page }); 

How can I do this?

Answer 1

I would style a link to look like a button, because that way there is a no-js fallback.

---

So this is how you could animate the jump using jquery. No-js fallback is a normal jump without animation.

Original example:

jsfiddle

$(document).ready(function() {    $(".jumper").on("click", function( e ) {        e.preventDefault();        $("body, html").animate({         scrollTop: $( $(this).attr('href') ).offset().top       }, 600);      });  });

#long {    height: 500px;    background-color: blue;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <!-- Links that trigger the jumping -->  <a class="jumper" href="#pliip">Pliip</a>  <a class="jumper" href="#ploop">Ploop</a>  <div id="long">...</div>  <!-- Landing elements -->  <div id="pliip">pliip</div>  <div id="ploop">ploop</div>

---

New example with actual button styles for the links, just to prove a point.

Everything is essentially the same, except that I changed the class .jumper to .button and I added css styling to make the links look like buttons.

Button styles example