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

2020/10/09 17:01 · javascript ·  · 0评论

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

有内置的方法可以做到这一点吗?

这是一个小例子。

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>

死了很简单。无需插件

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

这是一个工作示例

的文档scrollTop

我意识到这不能解决在容器中滚动的问题,但是人们发现它很有用,因此:

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

我们同时选择html和body,因为文档滚动条可能位于其中之一,并且很难确定哪个滚动条。对于现代浏览器,您可以使用$(document.body)

或者,转到页面顶部:

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

还是不带动画:

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

要么...

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

我同意Kevin和其他人的观点,为此使用插件是没有意义的。

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

我自己做了。无需任何插件。查看我的要点

// 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);
});

您可以scrollIntoView()在javascript中使用method。只是给id.scrollIntoView();

例如

row_5.scrollIntoView();

您可以使用jQuery scrollTo插件插件:

$('div').scrollTo('#row_8');

将元素滚动到容器的中心

将元素带到容器的中心。

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

它不精确到中心,但是您不会在较大的较大元素上识别它。

您可以通过jQueryJavaScript进行滚动,
只需要两个元素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);
  });
});

我做了其他人一起发布的内容。简单流畅

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

不知道为什么没有人说清楚,因为有内置的javascriptscrollTo函数:

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

参考

相反的是这里大多数人所提出的建议,我建议你,如果你想动画移动使用插件。仅对scrollTop设置动画不足以提供流畅的用户体验。在这里查看我的答案以进行推理。

这些年来,我尝试了许多插件,但最终自己写了一个。您可能需要一下:jQuery.scrollable使用它,滚动动作变为

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

同样,请看一下演示以实际操作它。

对于返回目标位置并适用于窗口和非窗口滚动容器的函数,请随时使用此gist其中的注释说明了位置的计算方法。

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

对于它的价值,这是我设法通过滚动(不知道容器)可以位于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();

我做了这个组合。它对我的工作。但如果单击鼠标移动该div尺寸太大而导致场景无法滚动到该特定div,则面临一个问题。

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

        }
本文地址:http://javascript.askforanswer.com/ruheshiyongjquerygundongdaotedingxiangmu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!