使用jQuery滚动到一个元素 [英] Scroll to an element using jQuery

问题描述

我尝试过的选项：

• jQuery的 scrollTo ：问题在于页面滚动，以至于元素在最上面（或者至少它试图这很像是这样工作的：< a name =xyz> / < a href =＃xyz> ）。我想要的是滚动的最小数量，以便整个元素可见（并且，如果元素太高，就像那里的锚一样工作）。




• scrollIntoView ：很糟糕，我希望它能顺利滚动（例如 $。scrollTo（$（'＃id1'），'fast'）; / code>）。此外，它似乎没有做我想要的。

>您需要做的是确定元素页面中的位置，顶部和底部（如果您正在考虑水平滚动，则左/右）。然后确定视窗在窗口上的当前位置，然后窗口的scrollTop应该被设置为任何可以让其他人查看的值。




我只是在这个编辑器中敲了以下内容，所以它没有经过测试，但会给你一个插件的一般想法。





更新 - 显示版本这为OP工作，以及一个更流畅的版本

  jQuery.fn.scrollMinimal = function（smooth）{
 var cTop = this.offset（）。top; 
 var cHeight = this.outerHeight（true）; 
 var windowTop = $（window）.scrollTop（）; 
 var visibleHeight = $（window）.height（）; 
 
 if（cTop< windowTop）{
 if（smooth）{
 $（'body'）。animate（{'scrollTop'：cTop}，'slow'， '摇摆'）; 
} else {
 $（window）.scrollTop（cTop）; 
 
} else if（cTop + cHeight> windowTop + visibleHeight）{
 if（smooth）{
 $（'body'）。animate（{'scrollTop'： cTop  -  visibleHeight + cHeight}，'slow'，'swing'）; 
} else {
 $（window）.scrollTop（cTop  -  visibleHeight + cHeight）; 
} 
} 
}; 
 
 $（'＃item'）。scrollMinimal（）; 
  




I need the page to scroll just so that an element is visible.

Options I've tried:

• jQuery's scrollTo: the problem is that the page scrolls so that the element is on top (or at least it tries to do that, much like how this works: <a name="xyz"> / <a href="#xyz">). What I want is the minimum amount of scrolling so that the entire element is visible (and, if the element is too tall, work like the anchor there).

• scrollIntoView: awful, I want it to scroll smoothly (like $.scrollTo($('#id1'), 'fast');). Also, it doesn't seem to do what I want either.

解决方案

What you need to do is identify the position within the page of the element, top and bottom (and left/right if you are considering horizontal scrolling). Then identify the current position of the viewport on the window, the scrollTop of the window should then be animated to whatever value will bring the other just in to view.

I just knocked up the following in this editor, so it's untested, but will give you the general idea for a plugin.

Updated - to show version that worked for the OP, as well as a smoother version

jQuery.fn.scrollMinimal = function(smooth) {
  var cTop = this.offset().top;
  var cHeight = this.outerHeight(true);
  var windowTop = $(window).scrollTop();
  var visibleHeight = $(window).height();

  if (cTop < windowTop) {
    if (smooth) {
      $('body').animate({'scrollTop': cTop}, 'slow', 'swing');
    } else {
      $(window).scrollTop(cTop);
    }
  } else if (cTop + cHeight > windowTop + visibleHeight) {
    if (smooth) {
      $('body').animate({'scrollTop': cTop - visibleHeight + cHeight}, 'slow', 'swing');
    } else {
      $(window).scrollTop(cTop - visibleHeight + cHeight);
    }
  }
};

$('#item').scrollMinimal();

这篇关于使用jQuery滚动到一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！