Javascript scrollTop offset（）未正确设置容器内部div的动画/工作_Javascript_Jquery_Html_Css_Offset

Javascript scrollTop offset（）未正确设置容器内部div的动画/工作

javascript jquery html css

Javascript scrollTop offset（）未正确设置容器内部div的动画/工作,javascript,jquery,html,css,offset,Javascript,Jquery,Html,Css,Offset,我试图使用简单的jquery offset（）和动画，当用户单击链接时，使我的div滚动到所需的div 基本上，当用户单击blog时，它将转到test1 用户单击Contact，它将移动到test2 用户单击Work，它将移动到test3 我实现了一些我在以前的项目中使用过的代码（它以前工作过），但是这次卷轴不能正常工作，我真的不知道原因。我试图寻找一个解决方案，但web开发对我来说是断断续续的，我不理解其中的一些解释：/任何帮助都将不胜感激 EditOne:必须更新html，但仍然无法工作 H

我试图使用简单的jquery offset（）和动画，当用户单击链接时，使我的div滚动到所需的div

基本上，当用户单击blog时，它将转到test1 用户单击Contact，它将移动到test2 用户单击Work，它将移动到test3

我实现了一些我在以前的项目中使用过的代码（它以前工作过），但是这次卷轴不能正常工作，我真的不知道原因。我试图寻找一个解决方案，但web开发对我来说是断断续续的，我不理解其中的一些解释：/任何帮助都将不胜感激

EditOne:必须更新html，但仍然无法工作

HTML：

<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="index.css"  />
<link rel="stylesheet" type="text/css" href="reset.css"  />


<title>Bryan the Lion</title>
</head>

<body>
    <script type="text/javascript">
    function go_One(){
    var divPosition = $('.test1').offset();
    $('#main_wrapper #main').animate({scrollTop: divPosition.top}, "fast");
    }
    </script>
    <script type="text/javascript">
    function go_Two(){
    var divPosition = $('.test2').offset();
    $('#main_wrapper #main').animate({scrollTop: divPosition.top}, "fast");
    }
    </script>
    <script type="text/javascript">
    function go_Three(){
    var divPosition = $('.test3').offset();
    $('#main_wrapper #main').animate({scrollTop: divPosition.top}, "fast");
    }
    </script>
    <div id = "header">
        <h1>Title</h1>
    </div>
    <div id = "main_box">
        <div id = "designHex">

        </div>
        <div id ="nav">
            <ul>
            <li id = "Blog"><a href="#" onclick= "go_One()"></a></li>
            <li id = "Contact"><a href="#"onclick= "go_Two()"></a></li>
            <li id = "Work"><a href="#" onclick= "go_Three()"></a></li> 
            </ul>
        </div>
        <div id = "main_wrapper">
            <div id ="main">
                <div class = "test1">
                    <p>some div</p>
                </div>
                <div class = "test2" >
                    <p>some div2</p>
                </div>  
                <div class = "test3" >
                    <p>some div3</p>
                </div>  
            </div>
        </div>

    </div>
</body>


</html>

您实际上没有针对好的元素来设置scrollTop的动画：

$('html,body').animate({scrollTop: divPosition.top}, "fast"); // instead of #main_wrapper #main

正如在评论中所说，您的代码包含许多错误或非标准符号。例如，您使用3个脚本标记和3个函数来完成相同的工作。只有一个元素就可以做到这一点。
您实际上没有将好的元素作为目标来设置scrollTop的动画：

$('html,body').animate({scrollTop: divPosition.top}, "fast"); // instead of #main_wrapper #main

正如在评论中所说，您的代码包含许多错误或非标准符号。例如，您使用3个脚本标记和3个函数来完成相同的工作。这只需要一个就可以完成。
您需要考虑父div的scrollTop和偏移量：
JSFiddle：我将代码更改为使用单个函数（传递目标选择器）。我删除了第二个id选择器，因为id是唯一的，并且id查找是最快的查找类型（第二次搜索不会减慢速度）

注意：我必须隐藏JSFIDLE的
designHex
元素，因为它与第一个链接重叠。
您需要考虑父div的滚动顶部和偏移：
JSFiddle：我将代码更改为使用单个函数（传递目标选择器）。我删除了第二个id选择器，因为id是唯一的，并且id查找是最快的查找类型（第二次搜索不会减慢速度）

注意：我不得不隐藏JSFIDLE的
designHex
元素，因为它与第一个链接重叠。
加载页面/单击链接时控制台是否返回任何错误？顺便说一句，你的代码包含很多错误。它说未捕获的语法错误：意外的令牌非法。所以请更正你的代码，这样就可以了：）事实上，nvm，我在index.php中更改了一些内容。但是我恢复了它，控制台没有显示任何错误。斯利。但是它不起作用。请你把错误指给我看好吗？我的意思是，我在堆栈溢出上发布此消息是有原因的，如果我知道如何更正错误，我会这样做。当您加载页面/单击链接时，控制台是否返回任何错误？顺便说一句，你的代码包含很多错误。它说未捕获的语法错误：意外的令牌非法。所以请更正你的代码，这样就可以了：）事实上，nvm，我在index.php中更改了一些内容。但是我恢复了它，控制台没有显示任何错误。斯利。但是它不起作用。请你把错误指给我看好吗？我的意思是，我之所以在堆栈溢出上发布此消息，是有原因的，如果我知道如何更正错误，我会这样做。滚动显然是为了应用于带有3个div的div。整个页面并不是他滚动的目标。是的，我尝试了这个代码，但没有成功。正如true blue所说，滚动本身并没有什么问题，只是它的行为不稳定。嗯，他没有这么说，但他对目标元素的看法是正确的。好吧，我以为你试图让窗口滚动到目标元素。滚动显然是要应用到带有3个div的div。整个页面并不是他滚动的目标。是的，我尝试了这个代码，但没有成功。正如true blue所说，滚动本身并没有什么问题，只是它的行为不稳定。嗯，他没有这么说，但他对目标元素的看法是正确的。好的，我以为你试图让窗口滚动到目标元素。非常感谢，我非常感谢你花时间回答这个问题。回答得好描述谢谢：）非常感谢，我感谢你花时间回答这个问题。回答得好描述谢谢：）
function scrollTo(selector) { var offset = $(selector).offset(); var $main = $('#main'); $main.animate({ scrollTop: offset.top - ($main.offset().top - $main.scrollTop()) }, "fast"); }