向上/向下滚动到页面上的不同区域
向上/向下滚动到页面上的不同区域
提问于 2010-09-01 23:15:34
我想实现以下功能使用jQuery scrollTo函数或一些其他类似的函数，将达到相同的结果。
我基本上会在我的网页上有一个DIV部分，其中将包含大约10个类别的URL链接。
例如：
div id="categories">
<a href="A">Section A</a>
<a href="B">Section B</a>
<a href="C">Section C</a>
<a href="D">Section D</a>
...
etc
</div>现在在这个DIV下面，我将在页面上列出所有这10个类别部分，每个类别中都有一些图像。
我想和不确定如何使用jQuery是，当一个用户说点击上面的C节时，我希望页面顺畅地向下scrollTo到C节标题，C节标题下面也有图像，所以C节标题现在位于页面的顶部以及它下面的任何图像。
Section A
Image1-Image2 etc
Section B
Image1-Image2 etc
Section C
Image1-Image2 etc
Section D
Image1-Image2 etc现在从这里，我也想要另一种机制，允许用户返回到上面的目录DIV，再次使用平滑滚动返回到页面顶部，再次显示每个单独的部分。
我希望每个部分都是这样的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-09-01 23:25:20
你可以有这样的标记：
<div id="categories">
<a href="#A">Section A</a>
<a href="#B">Section B</a>
//etc...
</div>
<h3 id="A">Section A</h3>
<div>
Image1-Image2 etc<br />
<a href="#categories" class="backToTop">Back to Top</a>
</div>
<h3 id="B">Section B</h3>
<div>
Image1-Image2 etc<br />
<a href="#categories" class="backToTop">Back to Top</a>
</div>
//etc...并像这样匹配jQuery：
$("#categories a, a.backToTop").click(function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $(this.hash).offset().top });
});You can give it a try here，如果你只是想要一个简单的滚动，就不需要插件了:)这种方法的好处是，如果JavaScript被禁用，他们仍然可以在没有动画的情况下获得滚动效果，you can see what that looks like here。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3619574
复制相关文章
相似问题
腾讯云开发者
