如何使用jQuery滚动到特定项目？

时间：2010-05-25 15:01:31

标签： javascript jquery scroll

我有一张带垂直滚动条的大桌子。 我想使用jQuery / Javascript滚动到此表中的特定行。

是否有内置方法可以做到这一点？

Here is a little example to play with. 

div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}
<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
    </table>
</div>

13 个答案:

答案 0 :(得分：533)

死简单。 无需插件。

var $container = $('div'),
    $scrollTo = $('#row_8');

$container.scrollTop(
    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);

// Or you can animate the scrolling:
$container.animate({
    scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});​

这是working example。

Documentation for scrollTop

答案 1 :(得分：108)

我意识到这不会回答容器中的滚动，但是人们发现它很有用，所以：

$('html,body').animate({scrollTop: some_element.offset().top});

我们同时选择html和body，因为文档滚动条可以在任何一个上，很难确定哪个。对于现代浏览器，您可以使用$(document.body)。

或者，转到页面顶部：

$('html,body').animate({scrollTop: 0});

或没有动画：

$(window).scrollTop(some_element.offset().top);

... OR 

window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)

答案 2 :(得分：26)

我同意凯文和其他人的观点，使用插件是没有意义的。

window.scrollTo(0, $("#element").offset().top);

答案 3 :(得分：8)

我找到的最佳插件是this gist。

它不是一个插件，但它完成了一个人的工作，它解决了我的问题。不幸的是它只适用于FireFox。不知道为什么chrome不喜欢它/不想运行它。

编辑：与此同时，我自己设法做到了。不需要任何插件。查看我的gist：

// Replace #fromA with your button/control and #toB with the target to which     
// You wanna scroll to. 
//
$("#fromA").click(function() {
    $("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});

答案 4 :(得分：3)

我总是发现the jQuery scrollTo plugin对此非常有用。与演示一起玩，看看它是否适合你。

答案 5 :(得分：3)

您可以在javascript中使用scrollIntoView()方法。 只需给id.scrollIntoView();

例如

row_5.scrollIntoView();

答案 6 :(得分：1)

不确定为什么没有人说明显的，因为内置了javascript scrollTo功能：

scrollTo( $('#element').position().top );

Reference

答案 7 :(得分：1)

我做了其他人发布的内容的组合。它简单而流畅

 $('#myButton').click(function(){
        $('html, body').animate({
            scrollTop: $('#scroll-to-this-element').position().top },
            1000
        );
    });

答案 8 :(得分：1)

与大多数人的建议相反，我建议你做使用插件，如果你想动画移动。只是动画scrollTop不足以获得流畅的用户体验。有关推理，请参阅my answer here。

多年来我尝试了很多插件，但最终自己写了一个。你可能想要给它一个旋转：jQuery.scrollable。使用它，滚动操作变为

$container.scrollTo( targetPosition );

但这不是全部。我们也需要确定目标位置。您在其他答案中看到的计算，

$target.offset().top - $container.offset().top + $container.scrollTop()

主要是有效但不完全正确。它不能正确处理滚动容器的边框。目标元素按边框的大小向上滚动太远。 Here is a demo.

因此，计算目标位置的更好方法是

var target = $target[0], 
    container = $container[0];

targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;

再次，看看at the demo，看看它的实际效果。

对于返回目标位置并适用于窗口和非窗口滚动容器的函数，请随意使用this gist。那里的评论解释了如何计算头寸。

一开始，我曾说过最好使用插件进行动画滚动。但是，如果要在没有转换的情况下跳转到目标，则不需要插件。请参阅answer by @James，但如果容器周围有边框，请确保正确计算目标位置。

答案 9 :(得分：1)

将元素滚动到容器中心

将元素带到容器的中心。

DEMO on CODEPEN

JS 

function scrollToCenter() {
  var container = $('.container'),
    scrollTo = $('.5');

  container.animate({
    //scrolls to center
    scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
  });
}

HTML 

<div class="container">
   <div class="1">
    1
  </div>
  <div class="2">
    2
  </div>
  <div class="3">
    3
  </div>
  <div class="4">
    4
  </div>
  <div class="5">
    5
  </div>
  <div class="6">
    6
  </div>
  <div class="7">
    7
  </div>
  <div class="8">
    8
  </div>
  <div class="9">
    9
  </div>
  <div class="10">
    10
  </div>


</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
  Scroll
</button>

CSS 

.container {
  height: 60px;
  overflow-y: scroll;
  width 60px;
  background-color: white;
}

对于中心来说并不准确，但你不会在更大的更大元素上认出它。

答案 10 :(得分：1)

您可以按 jQuery 和 JavaScript 滚动 只需要两个元素jQuery和这个JavaScript代码：

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 1500);
  });
});

＆＃13;
＆＃13; 
$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 1500);
  });
});
＆＃13; 
#pane1 {
  background: #000;
  width: 400px;
  height: 400px;
}

#pane2 {
  background: #ff0000;
  width: 400px;
  height: 400px;
}

#pane3 {
  background: #ccc;
  width: 400px;
  height: 400px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>
    <a href="#pane1" class=" js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane3" class=" js-scroll-to-id">Item 3</a>
  </li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#pane3" class="js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane1" class="js-scroll-to-id">Item 3</a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 11 :(得分：0)

对于它的价值，这就是我设法为一般元素实现这种行为的方式，该元素可以在DIV中滚动（不知道容器）

它会创建目标元素高度的虚假输入，然后将焦点放在其上，无论您在可滚动层次结构中有多深，浏览器都会关注其余部分。像魅力一样。

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

答案 12 :(得分：0)

我做了这种组合。它为我工作。但如果点击则面临一个问题     移动div大小太大，以至于无法将Scenerio滚动到此     

 var scrollDownTo =$("#show_question_" + nQueId).position().top;
        console.log(scrollDownTo);
        $('#slider_light_box_container').animate({
            scrollTop: scrollDownTo
            }, 1000, function(){
        });

        }
相关问题
最新问题