0

我正在尝试让 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，但得到了相同的结果。

有任何想法吗？提前谢谢你。

4

2 回答 2

4

要抵消单击锚标记的影响，您应该使用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 问题。

于 2012-06-03T15:48:11.653 回答
1

通常我使用类似的东西：

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});
});
});
于 2012-06-03T15:04:36.910 回答