Scroll to an Element

Need to scroll to an element onclick()? The code below should do it. Feel free to use it. You will need jQuery. Be aware of the use of let in the JavaScript below, you may have to replace this with var.

demo scroll

HTML for the view:

<span class="scroll-to-a" data-scroll-to="#demo-scroll">demo scroll</span>

<div id="demo-scroll">
    <p>scroll to here</p>
</div>

JavaScript to listen for the click and then scroll:

jQuery('.scroll-to-a').click(function(){

  let elementId = jQuery(this).attr('data-scroll-to'),
    eleLocation = jQuery(elementId).offset().top;

  jQuery('html, body').animate({ scrollTop: eleLocation }, 1000);
});

CSS to make the span look like a link:

.scroll-to-a {
  color: #007bff;
  cursor: pointer;
}

.scroll-to-a:hover {
  color: #0056b3;
  text-decoration: underline;
}

scroll here for demo

scroll back

READ MORE ABOUT OUR SERVICES


back to top