Question

我正在尝试使用scrollTo jquery工作。尝试了各种tutorias /方法，但似乎没有工作。我正在将它用于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/

NB！我也使用了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;在click事件上，因为否则浏览器将自行导航到目标或只是执行类似

的操作

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

scrollTo效果jquery无法正常工作

2 个答案: