Question

我有一个容器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>

Answer 1

我这样做了：

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

Answer 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>

scrollTop里面没有工作

2 个答案: