Skip to content

Instantly share code, notes, and snippets.

@keeganbrown

keeganbrown/smooth-scrolling.js

Created November 13, 2015 19:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save keeganbrown/24fa12496d50a6b8ef96 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save keeganbrown/24fa12496d50a6b8ef96 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. keeganbrown created this gist Nov 13, 2015.
    41 changes: 41 additions & 0 deletions smooth-scrolling.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    var $window = $(window); //Window object

    var scrollTime = 1.2; //Scroll time
    var scrollDistance = 270; //Distance. Use smaller value for shorter scroll and greater value for longer scroll

    $window.on("mousewheel DOMMouseScroll", function(event){

    event.preventDefault();

    var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta*scrollDistance);

    TweenMax.to($window, scrollTime, {
    scrollTo : { y: finalScroll, autoKill:true },
    ease: Power2.easeOut,
    autoKill: true,
    overwrite: 5
    });

    });

    $window.on('keydown', function(e) {
    var finalScroll = 0;
    //down
    if (e.keyCode == 40) {
    e.preventDefault(); //prevent default arrow key behavior
    finalScroll = $window.height()/1.5;
    }
    //up
    else if (e.keyCode == 38) {
    e.preventDefault(); //prevent default arrow key behavior
    finalScroll = -$window.height()/1.5;
    }

    //scroll element into view
    TweenMax.to($window, 0.5, {
    scrollTo : { y: '+='+finalScroll },
    ease: Power2.easeOut
    });
    });