Question

我确信这是一个非常常见的问题，但经过大量研究后，我似乎无法找到问题的答案。

所以只是一点警告;我真的很喜欢javascript和jQuery等。

问题！我正在尝试应用两个图像（它是看起来像按钮的图像：P），您单击它并滚动到“下一个”段落或div。

为了概述它的外观，这里是HTML的一部分：

<div id="scrollbuttons">
    <img id="prev" src="pics/prev.png"><a href="#"></a></img>
    <img id="next" src="pics/next.png"><a href="#"></a></img>
</div>

另外：

<div id="work">
    <p class="maintext">blabla</p>
</div>
<div id="gallery">
    <p class="maintext">blabla</p>
</div>
<div id="project">
    <p class="maintext">blabla</p>
</div>
<div id="finish">
    <p class="maintext">blabla</p>
</div>

所以我要创建的是当你点击“下一步”时，页面应该顺畅地自动滚动到第一个“工作”，然后到“画廊”等。

当您按“上一步”时，页面应该再次平滑并自动滚动回到上一点。

我有最新的jQuery版本，如果不是绝对需要，我不想安装插件。

所以我希望这是足够的信息来获得一些帮助，我真的很感激，因为我是JS的新手。

提前致谢

/ Emil Nilsson

Answer 1

在这里，这可能会更有效地完成，但它是动态的并且有效。单击按钮前进和后退。仅供参考我为所有内容div添加了一个名为section的共同类

JSFIDDLE

var Section = "start";

$("#next").click(function(){

    if(Section == "start"){
       var nextSection ="work";
    }else{
        var nextSection = $("#"+Section).next(".section").attr("id");
    }

      $("html, body").animate({scrollTop: $("#"+nextSection).offset().top});
      Section = nextSection;
  });

$("#prev").click(function(){

   var nextSection = $("#"+Section).prev(".section").attr("id");

  $("html, body").animate({scrollTop: $("#"+nextSection).offset().top});
    Section = nextSection;
 });

Answer 2

也许你需要这样的东西

http://jsfiddle.net/urUFK/

img将在这样的锚内部（语义和W3C验证）：

<a href="#"><img id="prev" src="pics/prev.png"></img></a>

在我的版本上你只需要定义第一个元素和div id的

单击时滚动到排队的div

2 个答案: