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

现在，从这里开始，我还希望另一种机制允许用户返回上面的Catergories 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被禁用，他们仍然会在没有动画的情况下获得滚动效果{{{ 3}}

Answer 2

您可以使用jQuery scrollTo plugin轻松完成此操作。允许您指定滚动的方法之一是传递要平滑滚动到的元素的id。所以在你的情况下，可以这样做：

$('#categories a').click(function(e){
    // Stop default link clicking behaviour
    e.preventDefault();

    // Get the section id from the link's href
    var sectionId = $(this).attr('href');
    $(document).scrollTo(sectionId);
});

然后您的标记将如下所示：

div id="categories">
    <a href="#A">Section A</a>
    <a href="#B">Section B</a>
</div>

<div id="A">
  <img src="foo.gif"/>
</div>
<div id="B">
  <img src="bar.gif"/>
</div>

请注意，我已更改了您的类别链接hrefs ~~以及在每个部分中添加了命名锚点~~。这将允许没有javascript的人仍然跳转到链接点击部分。

要回到每个部分的类别，您只需插入一个返回顶部链接，使用与您的类别链接相同的点击处理程序样式，而这次它将指定scrollTo('#categories')。

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

2 个答案: