Question

我在项目中有一个列表，带有滚动条。还有一个按钮。因此，当按下按钮时，滚动移动到给定的ID以使其可见。我看了类似的解决方案，但无法使我的工作。

这是我的代码：

function next() {
    $("#example").css("background", "red");
}

function goToByScroll(id) {
    // Reove "link" from the ID
    // Scroll
    $('ul').animate({
        scrollTop: $("#" + id).offset().top()
    },
        'slow');
}

$("button").click(function (e) {
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll("example");
});

HTML：

<ul>
    <li>Name1</li>
    <li>Name2</li>
    <li>Name3</li>
    <li>Name4</li>
    <li>Name5</li>
    <li>Name6</li>
    <li>Name7</li>
    <li id="example">Name8</li>
    <li>Name9</li>
    <li>Name10</li>
</ul>
<button onClick="next()">Next</button>

http://jsfiddle.net/danials/f2UZT/ 有什么想让它发挥作用吗？它必须作为一个函数工作，因此函数值将是一个id，因此它将移动到持有id的元素。

Answer 1

而不是

scrollTop: $("#" + id).offset().top()

使用此

scrollTop: $("#" + id).offset().top

并避免li向上使用li高度，所以你的最终代码将是

$('ul').animate({
        scrollTop: $("#" + id).offset().top - $("#" + id).height()
},'slow');

正在使用 DEMO

Answer 2

您可以使用它来滚动

$.fn.scrollView = function () {
  return this.each(function () {
    $('html, body').animate({
     scrollTop: $(this).offset().top
   }, 1000);
 });
}

目标按钮和目标位置

$('#post-1').click(function (event) {
    event.preventDefault();
    $('#contact').scrollView();
});

如何通过jQuery将滚动条移动到某个位置

2 个答案: