平滑滚动功能不正常

Question

我正在为我们的网站创建一个新页面，但我运行遇到了一个我无法找到解决方案的小问题。我们在我们网站的顶部有一个 link，我们希望在单击时让页面向下滚动到页面底部的 link 开始。问题是当点击页面时直接跳下没有动画。我在这里找到代码 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

头：

 <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');
 });

编辑：添加页面 link

Answer 1

我认为一个类似但有效的 jQuery 实现是这样的-

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);

Answer 2

这是来自您网站的更新代码。试试这个-

<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>

平滑滚动功能不正常

Smooth-Scroll not functioning properly

jquery

html

smooth-scrolling