Skip to content

Instantly share code, notes, and snippets.

@saboyadev

saboyadev/smoothScrolling.js

Last active June 5, 2022 19:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save saboyadev/8a50bfed301d932ccf1e7fd4cb0fa684 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save saboyadev/8a50bfed301d932ccf1e7fd4cb0fa684 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. saboyadev revised this gist Jun 5, 2022. 1 changed file with 12 additions and 18 deletions.
    30 changes: 12 additions & 18 deletions smoothScrolling.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,13 @@
    // Scroll to specific values
    // scrollTo is the same
    window.scroll({
    top: 2500,
    left: 0,
    behavior: 'smooth'
    });

    // Scroll certain amounts from current position
    window.scrollBy({
    top: 100, // could be negative value
    left: 0,
    behavior: 'smooth'
    });

    // Scroll to a certain element
    document.querySelector('.hello').scrollIntoView({
    behavior: 'smooth'
    // Smooth Scrolling
    $('.btn').on('click', function(e) {
    if (this.hash !== '') {
    e.preventDefault();
    const hash = this.hash;
    $('html, body').animate(
    {
    scrollTop: $(hash).offset().top
    },
    800
    );
    }
    });
  2. saboyadev created this gist Jun 4, 2022.
    19 changes: 19 additions & 0 deletions smoothScrolling.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    // Scroll to specific values
    // scrollTo is the same
    window.scroll({
    top: 2500,
    left: 0,
    behavior: 'smooth'
    });

    // Scroll certain amounts from current position
    window.scrollBy({
    top: 100, // could be negative value
    left: 0,
    behavior: 'smooth'
    });

    // Scroll to a certain element
    document.querySelector('.hello').scrollIntoView({
    behavior: 'smooth'
    });