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

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

是否有内置的方法来执行此操作

div{
宽度：100px；
高度：70像素；
边框：1px纯蓝色；
溢出：自动；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

您可以使用该插件：

---

非常简单不需要插件

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()
});​

这是一本书

---

.

我自己设法做到了。不需要任何插件。查看我的：

---

我意识到这并不能解决在容器中滚动的问题，但人们发现它很有用，所以：

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

我们同时选择html和body，因为文档滚动条可能在其中一个上，很难确定是哪一个。对于现代浏览器，您可以使用

$（document.body）

或者，转到页面顶部：

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

或不带动画：

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

或者

---

不知道为什么没有人说这是显而易见的，因为有一个内置的javascript

scrollTo

函数：

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

---

.

我同意Kevin和其他人的观点，使用插件来实现这一点是毫无意义的

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

---

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

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

---

与大多数人的建议相反，我建议你使用插件，如果你想动画的移动。仅为scrollTop设置动画不足以实现流畅的用户体验。请参阅以了解原因

多年来我尝试了很多插件，但最终还是自己写了一个。您可能想让它转一转：。使用该选项，滚动动作变为

$container.scrollTo( targetPosition );

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

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

大多数都有效，但并不完全正确。它无法正确处理滚动容器的边框。目标元素按边框的大小向上滚动过远

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

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

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

再一次，看看它在起作用

对于返回目标位置并适用于窗口和非窗口滚动容器的函数，请随意使用。其中的注释解释了如何计算位置

---

在一开始，我说过最好使用一个动画滚动插件。但是，如果您想不经过转换就跳转到目标，则不需要插件。有关详细信息，请参阅，但如果容器周围有边框，请确保正确计算目标位置。

您可以在javascript中使用

scrollIntoView（）

方法。 只需给出

id.scrollIntoView（）

比如说

row_5.scrollIntoView();

值得一提的是，这就是我如何为一个普通元素实现这样的行为，该元素可以在具有滚动的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();

var$scrollTo=$（'#someId'），
inputElem=$（''）；
$scrollTo.prepend（inputElem）；
inputElem.css({
位置：'绝对'，
宽度：“1px”，
高度：$scrollTo.height（）
});
inputElem.focus（）；
inputElem.remove（）；
将元素滚动到容器中心
将元素带到容器的中心


JS
HTML
它并不精确到中心位置，但在较大的元素上您无法识别它。
您可以通过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);
  });
});


$（函数（）{
//要在任何地方使用的通用选择器
$（“.js滚动到id”）。单击（函数（e）{
//动态获取href
var destination=$（this.attr（'href'）；
//防止href=“#”链接更改URL哈希（可选）
e、 预防默认值（）；
//设置滚动到目标的动画
$（'html，body'）。设置动画({
scrollTop:$（目标）.offset（）.top
}, 1500);
});
});
#窗格1{
背景：#000；
宽度：400px；
高度：400px；
}
#窗格2{
背景：#ff0000；
宽度：400px；
高度：400px；
}
#窗格3{
背景：#ccc；
宽度：400px；
高度：400px；
}
















我做了这个组合。这是我的工作。但如果单击，将面临一个问题
移动div大小太大，以致scenerio无法向下滚动到此位置
特别分部

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

        }

如果容器有滚动条，则需要考虑滚动条：scrollTo.offset（）.top-container.offset（）.top+container.scrollTop（）。您可以使用$（document.scrollTop（value）滚动整个窗口-基础jquery代码为您解决浏览器问题。如果您希望
scrollTo
居中，而不是在顶部：
scrollTo.offset（）.top-container.offset（）.top+container.scrollTop（）-（container.height（）/2）
元素.scrollIntoView（）
-这就是所需的全部内容。动画是标准化的。请参见注释在代码块的最末端有一个“不可见”字符。该字符在Edge、chrome中被视为无效。-我需要的正是你的一行要点，加上动画。谢谢<代码>不需要任何插件
？？但是你使用jQuery！它是一个巨大的库，甚至不是一个插件。我想你不需要在jquery库引用之外添加引用。另外，jquery是一种行业标准。你为什么不使用它？如果没有jquery，这可能是完全可行的，但它仍然需要有人编写大量代码来完成解析部分。这感觉适得其反。写一个完整的插件只是为了滚动到一个measy 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();

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

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

<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>

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

$(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);
  });
});

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

        }