滚动效果 jquery 不起作用

Question

我正在尝试获取scrollTo jquery工作。尝试了各种辅导/方法，但似乎都没有奏效。我正在将其用于WP站点，我的想法是有一些js文件相互混淆。正在使用以下.js：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/my_script.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.hoverscroll.js"></script> 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.scrollto-1.4.2-min.js"></script>

我用它来触发：

$(document).ready(function(){ $("#box1btn").click(function(){ $("#ommig").slideto({ slide_duration: 5000, }); }); });

但幻灯片不是...滑动，它只是跳跃，因为锚。

<a id="box1btn" href="#ommig">Om Mig</a>
<div id="ommig">Title</a>

来源： http://djpate.com/2011/01/01/animated-scrollto-effect-jquery-plugin/

铌！我也使用了Ariel Flesler的scrollto，但得到了相同的结果。

有什么想法吗？提前谢谢你。

Answer 1

为了抵消单击锚标签的影响，您应该使用 event.preventDefault() .

$(document).ready(function(){
    $("#box1btn").click(function(event){
        event.preventDefault();  
        $('html, body').animate (
             {scrollTop: $('#ommig').offset().top}, 5000
        );        
    });
});

在这里查看它的实际效果：http://jsfiddle.net/mhnmt/1/

编辑：将document.documentElement更改回'html, body'以修复Chrome问题。

Answer 2

通常我使用类似的东西：

var targetOffset = $('#ommig').offset().top; 
$('html,body').animate({scrollTop: targetOffset}, 5000});

此外，您可能需要在单击事件上返回 false;因为否则浏览器将自行导航到目的地或只是执行类似操作的操作

<a id="box1btn" href="javascript:;">Om Mig</a>
<div id="ommig">Title</a>
$(document).ready(function(){ 
$("#box1btn").click(function() {
    var targetOffset = $('#ommig').offset().top; 
    $('html,body').animate({scrollTop: targetOffset}, 5000});
});
});