Get started with jquery-scrollto CDN

MIT licensed

JQuery ScrollTo library: Smoothly scroll to webpage elements using jQuery.

Tags:
  • jquery
  • scroll
  • scrolling
  • scrollto
  • smooth
  • dom

Stable version

Copied!

How to start using jquery-scrollto CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with jquery-scrollto CDN - cdnhub.io</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.cdnhub.io/jquery-scrollto/1.4.6/jquery-scrollto.min.js"></script>
</head>
<body>
  <button id="scroll-to-top">Scroll to top</button>
  <button id="scroll-to-bottom">Scroll to bottom</button>
  <div id="content" style="height: 1000px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget odio id mauris ullamcorper bibendum. Donec id elit non mi porta gravida at eget magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <script>
    $(document).ready(function() {
      // Scroll to top
      $('#scroll-to-top').click(function(event) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: 0
        }, 500);
      });

      // Scroll to bottom
      $('#scroll-to-bottom').click(function(event) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: $('#content').height()
        }, 500);
      });
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!

All versions