Get started with iamdustan-smoothscroll CDN

MIT licensed

IAMDustan-smoothscroll is a jQuery plugin that adds smooth scrolling to a website.

Tags:
  • smooth
  • scroll
  • CSSOM
  • polyfill

Stable version

Copied!

How to start using iamdustan-smoothscroll CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with iamdustan-smoothscroll CDN - cdnhub.io</title>
  <style>
    /* Optional styles for scrolling animation */
    html, body {
      height: 100vh;
      margin: 0;
      overflow: hidden;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.5.11/dist/js/splide.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.5.11/dist/css/splide.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.0/js/fontawesome.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.0/css/fontawesome.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script src="https://cdn.cdnhub.io/iamdustan-smoothscroll/0.4.4/smoothscroll.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: 100vh;">
    <h1>Content 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque bibendum, quam quam bibendum odio, quis mollis sapien nibh et justo.</p>

    <h1>Content 2</h1>
    <p>Donec eget risus et ante elementum consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed commodo, magna quis commodo rhoncus, sem quam semper risus, nec commodo lacus enim eget dolor.</p>
  </div>

  <script>
    const scrollToTop = document.getElementById('scroll-to-top');
    const scrollToBottom = document.getElementById('scroll-to-bottom');
    const content = document.getElementById('content');

    scrollToTop.addEventListener('click', () => {
      smoothScroll.scrollTo(0, 0);
    });

    scrollToBottom.addEventListener('click', () => {
      const height = content.offsetHeight;
      smoothScroll.scrollTo(0, height);
    });

    // Optional: Add a custom easing function
    smoothScroll.easingType = 'easeInOutQuad';
  </script>
</body>
</html>

All versions