Smooth-Scroll not functioning properly

348 views Asked by At

I am working on a new page for our site and I have run into a small issue that I cannot figure out the solution to. We have a link in the top section of our site that we would like to, on click, have the page scroll down to the bottom of the page to the links to get started. The issue is that when clicked the page just jumps straight down with no animation. I found the code here http://jsfiddle.net/YtJcL/ and it works perfectly on the fiddle. Below is the code from my site. Any and all help is appreciated! Here is the actual page link: http://www.scrubsandbeyond.com/koibysanita.aspx

HEAD:

 <script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script>

HTML:

<a class="scroll" href="#destination1">apply now</a>

<section id="destination1">Let's get started!</section>

jQuery:

$(".scroll").click(function(event){
     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}, 1000,'swing');
 });

EDIT: added page link

2

There are 2 answers

5
Raj On BEST ANSWER

Here is updated code from you site. Try this-

<script>
$(function(){
    function smoothScroll (duration) {
        $('a[href^="#"]').on('click', function(event) {            

            var target = $( $(this).attr('href') );

            if( target.length ) {
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, duration);
            }
        });
    }
    smoothScroll(400);    
});

</script>
3
deleted On

I think a similar but efficient jQuery implementation would be this-

function smoothScroll (duration) {
    $('a[href^="#"]').on('click', function(event) {

        var target = $( $(this).attr('href') );

        if( target.length ) {
            event.preventDefault();
            $('html, body').animate({
                scrollTop: target.offset().top
            }, duration);
        }
    });
}
smoothScroll(400);