kisabelle
10/31/2013 - 6:38 PM

jQuery Scroll to Element with Easing / Smooth Scrolling, Reveal "Back to Top" link on scroll down

jQuery Scroll to Element with Easing / Smooth Scrolling, Reveal "Back to Top" link on scroll down

$(window).scroll(function() {
  var offset = 100;
  if ($(this).scrollTop() > offset) {
    $('#toTop:hidden').stop(true, true).fadeIn();
  } else {
    $('#toTop').stop(true, true).fadeOut();
  }
});
// method 1 

$(function() {
    $('nav a').bind('click',function(event){
        var $anchor = $(this);
 
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500,'easeInOutExpo');
        
        event.preventDefault();
    });
});

// method 2

$("article a[href^='#']").on('click', function(e) {
  console.log('triggered');
  // prevent default anchor click behavior
  e.preventDefault();

  // store hash
  var hash = this.hash;

  // animate
  $('html, body').animate({
   scrollTop: $(this.hash).offset().top
  }, 600, function(){

    // when done, add hash to url
    // (default click behaviour)
    window.location.hash = hash;
  });
});