div内的scrollTop不起作用答案

【问题标题】：scrollTop inside div not workingdiv内的scrollTop不起作用
【发布时间】：2014-02-25 18:32:51
【问题描述】：

我有一个容器 div，其中多个 div 彼此重叠，我希望能够单击一个链接，然后让我的溢出：滚动 div 到 scrollTop 到容器 div 内的关联 div。我所拥有的不起作用。

我试过了：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"   
 type="text/javascript"></script>

 <script type="text/javascript">
$("#container").animate({scrollTop: $("#box-2").position().top},1500);
 </script>

html:

<div id="wrapper">
<div id="top-nav">
    <a href="#box-2">How it Works</a>
    <a href="#box-3">About</a>
    <a href="#">Contact Us</a>
</div>
<div class="container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
<div id="box-5"></div>
</div>
<div>

【问题讨论】：

请将其放入 JS fiddle 并使用链接更新 Q'
你的脚本是在html之前还是之后？它应该在之后，否则它不会找到#container。此外，您正在搜索id，但容器是class。试试$('.container')
脚本现在可以工作了，因为我把它放在了 html 之后，但是当我点击一个链接时，它现在不会加载脚本
itcouldevenbeaboat - 小提琴未链接
现在它没有滚动到指定 div 的顶部

标签： javascript jquery

【解决方案1】：

我这样做了：

 <script type="text/javascript">
 $('.link-1').click(function(){
$(".container").animate({scrollTop: $("#box-2").position().top},1500);
return false;
 });
</script>

【讨论】：

【解决方案2】：

试试：

$(document).ready(function(){
    $("a").click(function(){
        $("#container").animate({scrollTop: $("#box-2").position().top},1500);
    });
});

使用“a”之外的其他选择器会很聪明，因为现在如果您单击页面上的每个链接，您的“#container” div 每次都会移动。

jQuery 插件“LocalScroll”和“ScrollTo”可能对您来说很有趣。

更新：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 <style>
    body {background-color: black; color: white;}
    a { text-decoration: none;}
    a:visited { color: green;}
 </style>
 <script type="text/javascript">
 var link;
 $(document).ready(function(){
    $("a").click(function(){
        link = $(this).attr("href");
        $(".container").animate({scrollTop: $(link).position().top},1500);
    });
 });
    </script>
</head>
<body>
    <div id="top-nav">
    <a href="#box-2">How it Works</a>
    <a href="#box-3">About</a>
    <a href="#box-4">Contact Us</a>
    <a href="#box-5">Box 5</a>
</div>
<div id="wrapper">
<div class="container" style="width: 100%; height: 100%; overflow: hidden">
<div id="box-1" style="background-color: red; width: 100%; height: 400px;"></div>
<div id="box-2" style="background-color: blue; width: 100%; height: 400px;"></div>
<div id="box-3" style="background-color: green; width: 100%; height: 400px;"></div>
<div id="box-4" style="background-color: yellow; width: 100%; height: 400px;"></div>
<div id="box-5" style="background-color: purple; width: 100%; height: 400px;"></div>
</div>
</div>
</body>
</html>

【讨论】：

现在它没有滚动到指定 div 的顶部。我不想使用插件
刚刚为你更新了我的答案，也许这就是你要找的，否则它可以给你一些想法。