Question

我试图使用简单的jquery offset（）和animate来让我的div在用户点击链接时滚动到所需的div。

基本上，当用户点击博客时，它将转到test1 用户点击联系它将移动到test2 用户点击工作它将移至test3。

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

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>

CSS：我认为最重要的是main_wrapper，main和test（1）（2）（3）

body{
height: 100% ;
background: url(images/gplaypattern.png); 
}
@font-face {
    font-family: "AlexBrush";
    src: url(fonts/AlexBrush-Regular.ttf) format("truetype");
}
#header{
height: 100px ;
margin-bottom: 20px ;
}
#main_box{   
margin: 0 auto ;
width: 80% ;
height: 52  0px ;

}
#main_wrapper{
margin-left: 45% ;      
width: 67%;
    overflow: hidden;
}
#main_wrapper #main{
   width: 103%;
    height: 500px ;
    overflow-y:scroll; 
}
.test1{
height: 500px ;
background: yellow;
}
.test2{
height: 500px ;
background: blue;
}
.test3{
height: 500px ;
background: gray;
}
#nav{
float: left;
width: 275px ;
height: 450px ;
margin-left: 3% ;
}
#nav ul li a{
display: block;
width: 100% ;
height: 150px ;
}
#nav ul li a:hover{
cursor: pointer;
}
#nav #Blog{
background: url(images/Blog.png);
}
#nav #Blog:hover{
background: url(images/Blog_hover.png);
}
#nav #Contact{
background: url(images/Contact.png);
}
#nav #Contact:hover{
background: url(images/Contact_hover.png);
}
#nav #Work{
background: url(images/Work.png);
}
#nav #Work:hover{
background: url(images/Work_hover.png);
}
#designHex{
background: rgba(255,255,255, 0.3);
height: 150px ;
width: 150px ;
position: absolute;
top: 50px ;
left: 5% ;
}

Answer 1

您需要考虑父div的scrollTop AND offset：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/Uafxz/2/

function scrollTo(selector) {
    var offset = $(selector).offset();
    var $main = $('#main');
    $main.animate({
        scrollTop: offset.top - ($main.offset().top - $main.scrollTop())
    }, "fast");
}

我将代码更改为使用单个函数（传递目标选择器）。我删除了第二个id选择器，因为id是唯一的，id查找是最快的查找类型（没有点通过第二次搜索减慢它）。

注意：我必须隐藏JSFiddle的designHex元素，因为它与第一个链接重叠。

Answer 2

你实际上没有将好元素定位为动画scrollTop：

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

正如评论中所述，您的代码包含许多错误或非标准符号。例如，您使用3个脚本标记和3个执行相同作业的函数。这可以只用一个。

scrollTop offset（）没有使用容器内的div动画/正常工作

2 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/Uafxz/2/