jQuery animated scroll to anchor not working?

Question

I thought I had resolved this issue but turns out i hadn't. Basically building a tumblr theme and something in my code is conflicting with the jquery animated scroll to top. I've tried removing things as I'm not entirely sure what it could be and thought it might be really obvious to somebody else?

Here is a link to my theme http://minori-theme.tumblr.com/ and a jsfiddle that I was following in order to animate the smooth scroll http://jsfiddle.net/YtJcL/1008/

The code I'm using is below and I'm just using a standard a link and id which are linking fine as it goes to the correct point its just not smooth scrolling.

$(document).ready(function() {
var hashTagActive = "";
$(".scroll").click(function (event) {
    if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
        event.preventDefault();
        //calculate destination place
        var dest = 0;
        if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
            dest = $(document).height() - $(window).height();
        } else {
            dest = $(this.hash).offset().top;
        }
        //go to destination
        $('html,body').animate({
            scrollTop: dest
        }, 2000, 'swing');
        hashTagActive = this.hash;
    }
});
});

Edit: If anyone has a simpler alternative I'm open to suggestions?

Answer 1

Easing effect on your animate function won't work if you don't add easing libary . jQuery core does not have easing.

<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js"></s‌​cript>

Also you can define dynamic value to animate's timing based on your element's offset top value. This will make your animation smoother based on the current value.

Here is jsFiddle with smooth scrolling effect.

 $(".scroll").click(function(event){
         event.preventDefault();

         var dest = 0;
         var $target = $(this.hash);
         var targetTop = $target.offset().top;
         var remainTop = $(document).height() - $(window).height();

         if( targetTop > remainTop){
              dest = remainTop;
         }else{
              dest = targetTop;
         }

         // Dynamic value for timing
         var dur = dest*1.2;

         $('html,body').animate({scrollTop:dest}, dur,'easeInOutCubic');

});

And one last note, you should orgnize your code with using variables, these coding of your is hard to read and maintain.

Answer 2

The scroll works the first time, but not any time after that. Check through all the var's that get used to see if something is being kept.

EDIT: The line

if(hashTagActive != this.hash)

will not bother with the jquery animation if you have already clicked "Back to top" because the hashTagActive is already #top. Thats why it works once but not twice.

EDIT 2: Check out This fiddle for a way around it