Question

我正在尝试创建一个滚动文本框，其中包含下一个和上一个按钮，用于将用户滚动到文本中的下一个/上一个锚标记。

我正在看这个jsfiddle http://jsfiddle.net/mplungjan/T5FgG/并且喜欢它加速/减速的方式，但当我将它插入文本区域http://jsfiddle.net/T5FgG/16/

时它不起作用

<button id="jumpbut">Next</button>

<div style="height:120px;width:500px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <a name="a">A target</a>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>        
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <a name="B">B target</a>
</div>

我最终想用Bootstrap来美化它。如果bootstrap有某些东西或扩展程序可以实现这一点，请告诉我。

任何帮助表示感谢。

Answer 1

更改下面的代码。

 $(function() {
  var $anchors = $('a[href*=#]:not([href=#])'),target = $anchors.first(),current=0;
  $("#jumpbut").on("click",function() {
    $('#test').animate({
      scrollTop: target.offset().top
    }, 2000,'swing');
    target = $anchors.eq(current+1);
  });
});

更新了Jsfiddle供您参考。

http://jsfiddle.net/T5FgG/18/

使用下一个和上一个按钮滚动锚标签

1 个答案: