链接滚动到一个 div（类），并且只有一个滚动（动画）在不同的方向

Question

我试图让很多链接滚动到一个 div，而只有一个滚动（动画）在不同的方向。

我的 html 看起来像这样：

<div class="top"> content here </div>

<ul>
  <li><a href="link1" class="bottom">link2</li>
  <li><a href="link2" class="bottom">link3</li>
  <li><a href="link3" class="bottom">link4</li>
  <li><a href="link4" class="bottom">link5</li>
  <li><a href="link5" class="bottom">link6</li>
</ul>

<p> content here </p>
<p> content here </p>
<p> content here </p>
<p> etc... </p>

<ul>
  <li><a href="link6" class="top">link1</li>
</ul>

<p> content here </p>
<p> content here </p>
<p> content here </p>
<p> etc... </p>

<div class="top"> content here </div>

所以 links2、3、4、5 和 6 将滚动到 div class="bottom"。

Link6 将滚动到顶部 div class="top"。

我无法更改链接本身，所以它必须通过使用类名来工作：

class="底部"

class="顶部"

如何用 jQuery 实现？

另外...我不想在链接或 div 中使用 ID。

Answer 1

使用 window.scrollby(nHorizo​​ntal, nVertical);在带有 setTimout() 的点击处理程序中。像这样：

$(".bottom").click(function() 
{ 
    setTimeout(500. function() { window.scrollBy(nHorizontal, nVertial) }); 
}).

并将链接的 href 更改为 #divBottom 并将 id 放在 div 上。

setTimeout 是给页面初始滚动的时间。

另一种方法显示在css-tricks.com。

代码：

$(function() 
{
  $('a[href*=#]:not([href=#])').click(function() 
  {
    var nDistance = 0; // Set to whatever distance this needs to scroll.

    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    &&  location.hostname == this.hostname) 
    {
      var aAnchor = $(this)
      var target  = $(this.hash.replace("#", ".")); // get target by class name

      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

      if (target.length) 
      {
          $('body').animate(
          {
             scrollTop: target.offset().top
          }, 
          1000,
          function()
          {
             $("body").animate({ scrollTop: nDistance }, 500);                 
          });
        return false;
      }
    }
  });
});

如果您想真正发挥创造力，请在锚点上设置一个数据属性，告诉每个锚点滚动多远。

html

<a href="#divBottom" data-scrollDistance="350" > Text <a/>

从点击处理程序访问的javascript

$(this).data("scrollDistance");