scrollTop内部div不工作

我有一个容器div与多个div的坐在彼此顶部，我希望能够点击一个链接，然后有我的溢出：滚动div到scrollTop关联的div在容器DIV。我有什么不工作。scrollTop内部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>

来源

2014-02-25 anmaree

请把这个变成一个JS小提琴和更新Q”与链接 –

是您的脚本之前或之后的HTML？它应该在后面或它不会找到'＃容器'。此外，您正在搜索'id'，但容器是'class'。尝试'$（'。container'）' – brouxhaha

该脚本现在正在工作，因为我把它放在html之后，但它现在不会在加载脚本时点击链接 – anmaree

我这样做：

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

来源

2014-02-25 18:46:14 anmaree

尝试：

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

因为现在你的“#container”div每次都会移动，如果你点击页面上的每一个链接，这将是聪明的使用另一个选择“a”。

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>

来源

2014-02-25 18:48:27 Lolukok

的顶部，现在它不滚动到指定div的顶部。我不想使用插件 – anmaree

刚刚更新了我的答案，也许这就是你的要求，否则它会给你一些想法。 – Lolukok

scrollTop内部div不工作

回答

相关问题