Skip to content

Instantly share code, notes, and snippets.

@giventofly

giventofly/scroll into.js

Last active December 11, 2023 06:53
Download ZIP

Revisions

  1. giventofly revised this gist Jul 11, 2018. 1 changed file with 9 additions and 7 deletions.
    16 changes: 9 additions & 7 deletions scroll into.js
    View file
    Original file line number Diff line number Diff line change
    @@ -20,10 +20,12 @@ document.querySelector('.hello').scrollIntoView({
    behavior: 'smooth'
    });

    //jQuery way
    $('html, body').animate({
    scrollTop: $(hash).offset().top
    }, 800, function(){
    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
    });
    //jQuery way with fast example:
    $('a.menu_items-link').on('click', function(e) {
    e.preventDefault();
    const value = this.getAttribute('href');
    //console.log(value);
    $('html, body').animate({
    scrollTop: $('#'+value).offset().top
    }, 800, callback);
    });
  2. giventofly revised this gist Jul 11, 2018. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions scroll into.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,4 +18,12 @@ window.scrollBy({
    // Scroll to a certain element
    document.querySelector('.hello').scrollIntoView({
    behavior: 'smooth'
    });

    //jQuery way
    $('html, body').animate({
    scrollTop: $(hash).offset().top
    }, 800, function(){
    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
    });
  3. giventofly created this gist Jul 4, 2018.
    21 changes: 21 additions & 0 deletions scroll into.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    //from https://css-tricks.com/snippets/jquery/smooth-scrolling/

    // 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'
    });