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>

所以link2,3,4,5和＆amp; 6将滚动到div class =＆＃34; bottom＆＃34;。

Link6将滚动到顶部div class =＆＃34; top＆＃34;。

我无法更改链接本身，因此必须使用类名来工作：

类=＆＃34;底部＆＃34;

类=＆＃34;顶部＆＃34;

如何使用jQuery实现这一目标？

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

Answer 1

使用window.scrollby（nHorizontal，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");

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

1 个答案: