jquery - 向上/向下滚动到页面上的不同区域

Question

我想使用 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 部分时，我希望页面平滑地向下滚动到 C 部分标题，该标题下面也有图像，这样C 部分标题现在位于页面顶部，与其下方的所有图像一起。

Section A
Image1-Image2 etc

Section B
Image1-Image2 etc

Section C
Image1-Image2 etc

Section D
Image1-Image2 etc

现在，从这里开始，我还想要另一种机制，允许用户返回到上面的类别 DIV，再次使用平滑滚动返回到页面顶部以再次显示每个单独的部分。

我希望每个部分都有这个。

Answer 1

你可以有这样的标记:

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