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

by

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

More Related Contents:

  1. Scroll Function working in reverse order [closed]
  2. Keep overflow div scrolled to bottom unless user scrolls up
  3. JS hide function error
  4. Get the longest text in HTML document using Jquery or javascript
  5. Javascript counting all the characters from a HTML document
  6. JSFiddle code not working in my own page
  7. How to disable scroll without hiding it?
  8. jQuery: Get selected element tag name
  9. How to dynamically create ‘@-Keyframe’ CSS animations?
  10. Make scrollbar visible in mobile browsers
  11. Infinity Loop Slider Concepts
  12. Text blinking jQuery
  13. Save a pre element as PDF with CSS
  14. jQuery Validation using the class instead of the name value
  15. Center flex item in container, when surrounded by other flex items
  16. Fill available spaces between labels with dots or hyphens
  17. Change the style of :before and :after pseudo-elements? [duplicate]
  18. collapse and expand tabs jquery / simple accordion
  19. Remove scrollbar but not scrolling functionality [duplicate]
  20. Gaussian Blur onHover Using jQuery
  21. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  22. fade effect using javascript no jquery?
  23. Rotate div text after clicking on button using jquery and css
  24. How to Bootstrap navbar static to fixed on scroll?
  25. How to use pagination on HTML tables?
  26. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  27. Include SVG files with HTML, and still be able to apply styles to them?
  28. A way to scroll an underlying div when mouse is on top of a fixed div?
  29. How can I reorder elements with JavaScript?
  30. Can you have multiple lines in an element?

Leave a Comment