Adjust speed of scroll hijack

Design help General
1

Tjena!

So I’ve implemented a scroll hijack. It’s working fine, but I want to adjust scroll speed so it matches the speed of the built-in scroll speed of Webflow controlled by the nav I’ve got fixed at the top of the page.

http://azzopardi.webflow.com

Public Link: https://preview.webflow.com/preview/azzopardi?preview=6b9df7ae5b7e2fccede9b9195691f2b3

This is the code I’ve got in the footer:

<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/zkhrhwpagv1cxqg/jquery.hammer.js"></script>


<script>

function l(o) { console.log(o) }
$(document).ready(function(){
  
  var sections = $('.box').toArray();
    
  var scroll = {
    activeSection: 0,
    sectionCount: sections.length - 1,
    isThrottled: false,
    throttleDuration: 1000,
    target: $(sections[0]).position().top
  }  
  

  
  function setSizes(){
    for (var i = 0; i < sections.length; i++) {

      $(sections[i]).css({
        'top' : window.innerHeight * i,
        'height' : window.innerHeight,
        'width' : window.innerWidth
      });
    }  
  }

  setSizes();
  $('body').on('resize', setSizes());

  function downSection() {
    var positionFromTop = $(sections[scroll.activeSection + 1]).position().top;
    $("body, html").animate({ "scrollTop": positionFromTop }, 300);
    ++scroll.activeSection;
  }
  
  function upSection(){
    var positionFromTop = $(sections[scroll.activeSection - 1]).position().top;
    $("body, html").animate({ "scrollTop": positionFromTop }, 300);
    --scroll.activeSection;  
  }
  
  $("body").hammer({ preventDefault: true }).on("swipe", function(event) { 
    if (event.gesture.direction == 'up') {
      if(scroll.activeSection != sections.length - 1){
        downSection();
        l('SWIPED UP');
      }
    } else if (event.gesture.direction == 'down') {
      if(scroll.activeSection != 0){
        upSection();
        l('SWIPED DOWN');
      }
    }
  });

  $(window).on('scroll',function(e){
    e.preventDefault();
  });
  
  $(window).on('mousewheel', function(event){    
    event.preventDefault();
    
    if (scroll.isThrottled) { return; }
    scroll.isThrottled = true;
    
    setTimeout(function () {
      scroll.isThrottled = false;
    }, scroll.throttleDuration);

    if(event.originalEvent.wheelDelta > 0) {
    
      if(scroll.activeSection === 0) return false;
      upSection();
      l('WHEELED DOWN');
      
    } else {
     
      if(scroll.activeSection >= scroll.sectionCount) return false;
      downSection(); 
      l('WHEELED UP');     

    }
  });
  
  
  $(window).keydown(function(e){

    if (e.keyCode == 40 && (scroll.activeSection != sections.length - 1) ){
      
      downSection();
      l('ARROW DOWN');  
    
    } else if(e.keyCode == 38 && (scroll.activeSection != 0)){
    
      upSection();
      l('ARROW UP');
    
    }

  });
  
}); // end doc ready


</script>

I tried to adjust the “throttleDuration: 1000”, but that didn’t do it.
Any thoughts on this? @bartekkustra?

One thing I’m thinking about is…if I match the scroll hijack speed to Webflows scroll speed…the page will be a pretty slow in scrolling…and annoy people…? There’s no way of speeding up the Webflow-scroll?

PS. You’ll find the script source here: http://codepen.io/smongey/pen/CLzkb

2

Hi @StevenP, does this article help? Customize Webflow Anchor Scrolling Behavior/Speed - Webflow Tips - Forum | Webflow Cheers, Dave

3

Hmm…I tried this line of code that @bartekkustra wrote:

$(document).ready(function () {    
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function() {
            window.location.hash = target;
        });
    });
});

It works, but It makes the sections flicker when scrolling using the links on the Nav.
There’s no “the other way around”? Instead of manipulating the Webflow default scroll speed, I want to adjust the scroll hijack speed…but changing the “throttleDuration: 1000” value didn’t do anything…and I suppose that’s the one controlling the speed…?

4

Hi @StevenP, I am not sure about the Hijack script. Those were the instructions to adjust the Webflow scroll speed. I guess we need Master @bartekkustra to comment :slight_smile: Cheers, Dave

5

Please notice the 300 in third line of each function presented below. Change it to the proper time and it will be fine.

function downSection() {
    var positionFromTop = $(sections[scroll.activeSection + 1]).position().top;
    $("body, html").animate({ "scrollTop": positionFromTop }, 300);
    ++scroll.activeSection;
  }
  
  function upSection(){
    var positionFromTop = $(sections[scroll.activeSection - 1]).position().top;
    $("body, html").animate({ "scrollTop": positionFromTop }, 300);
    --scroll.activeSection;  
  }

You’re welcome ;)

6

Works like charm! Thanks a lot @bartekkustra! :smile:

One more…is there any other scroll options instead of the “swing” property in this code?

$(document).ready(function () {    
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function() {
            window.location.hash = target;
        });
    });
});

Edit: the scroll hijack code and the code from @bartekkustra to controll Webflow default scroll speed seem not to work good together. Even though I apply the same scroll speed to both sets of code, I get a terrible flickering. @bartekkustra got some thoughts on this?