Question

我正在为我们的网站开辟一个新页面，我遇到了一个小问题，我无法找到解决方案。我们在网站的顶部有一个链接，我们希望在点击后，将页面向下滚动到页面底部的链接以开始使用。问题是，当点击页面时，只是直接跳下而没有动画。我在这里找到了代码http://jsfiddle.net/YtJcL/，它在小提琴上完美无缺。以下是我网站上的代码。任何和所有的帮助表示赞赏！以下是实际页面链接：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');
 });

编辑：添加了页面链接

Answer 1

以下是您网站的更新代码。试试这个 -

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

Answer 2

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

NSBeginAlertSheet

Smooth-Scroll无法正常运行

2 个答案: