0

I have a fairly long single page site which I use navigation to scroll up and down vertically through the different sections. Currently I am using the following javascript to accomplish this.

    $(".scroll").click(function(event) {
        event.preventDefault();        
        var $anchor = $('#' + this.hash.substring(1));
        $('html,body').animate({ 
            scrollTop: $anchor.offset().top - $anchor.attr('data-section-offset')
        }, 500);        
    });
});

The issue I am having is the page is also quite heavy on large images and so when I am scrolling through sections it can get a bit choppy. I was wondering how difficult would it be to add some easing to this? I am already including the jquery-easing script for another plugin, but my jquery and html5 animate knowledge is still a bit light. Any suggestions would be appreciated.

I had thought of just using lazy load on images but they are all background images so I dont think that will help.

Fiddle

  • The data offset is being used so the scroll clears the sicky navigation bar. Thanks, JC
Anujith
  • 9,370
  • 6
  • 33
  • 48
Jamie Collingwood
  • 689
  • 3
  • 8
  • 22
  • umn, you forgot to reference the jQuery library in your fiddle :P as for the easing you can refer to the [jQuery Animate Documentation](http://api.jquery.com/animate/) – Drew Apr 12 '13 at 14:56

1 Answers1

0

I think I fixed it by upping the delay from 500 to 1500. Would still like to know how to add easing if its possible.

Jamie Collingwood
  • 689
  • 3
  • 8
  • 22