Question

我在一个很长的HTML页面上有一个链接。当我点击它时，我希望通过滚动到视图中，在窗口的另一部分显示div。

有点像其他语言的EnsureVisible。

我已查看scrollTop和scrollTo，但它们似乎是红色的鲱鱼。

有人可以帮忙吗？

Answer 1

老问题，但是如果有人通过谷歌（我这样做）发现这个并且不想使用锚点或者jquery;有一个内置的javascript函数可以“跳转”到一个元素;

document.getElementById('youridhere').scrollIntoView();

什么更好;根据quirksmode上的大兼容性表，这是supported by all major browsers！

Answer 2

如果您不想添加额外的扩展名，则以下代码应与jQuery一起使用。

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

Answer 3

JQuery ScrollTo - see this sample code

怎么样？

Answer 4

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

没有花哨的滚动，但它应该带你去那里。

Answer 5

滚动的难点在于您可能不仅需要滚动页面来显示div，还可能需要在任意数量的级别上滚动可滚动的div。

scrollTop属性可用于任何DOM元素，包括文档正文。通过设置它，您可以控制滚动内容的距离。您还可以使用clientHeight和scrollHeight属性来查看需要多少滚动（当clientHeight（视口）小于scrollHeight（内容的高度）时可以滚动。

您还可以使用offsetTop属性来确定元素在容器中的位置。

要从头开始构建一个真正通用的“滚动到视图”例程，您需要从要显示的节点开始，确保它位于其父级的可见部分，然后对父级重复相同的操作，等等，直到你到达顶部。

这一步看起来像这样（未经测试的代码，不检查边缘情况）：

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}

Answer 6

这对我有用

$ git ls-files --stage
100644 2262de0c121f22df8e78f5a37d6e114fd322c0b0 0       alfa.sh
100755 2262de0c121f22df8e78f5a37d6e114fd322c0b0 0       bravo.sh

Answer 7

已发布的答案here - 解决您的问题。

编辑：如果你想要一个平滑的滚动，那么JQuery的答案是非常好的 - 我之前没有看到过它。

Answer 8

为什么不是命名锚？

Answer 9

您需要的属性是location.hash。例如：

location.hash ='top'; //会跳到命名锚“top

我不知道如何在不使用dojo或类似工具包的情况下进行漂亮的滚动动画，但是如果你只是需要它来跳转到锚点，location.hash应该这样做。

（在FF3和Safari 3.1.2上测试）

Answer 10

我无法在上面的futtta回复中添加评论，但为了更顺畅的滚动使用：

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"

Answer 11

您可以使用上面提到的Element.scrollIntoView()方法。如果您在其中没有参数，则会有 即时丑陋滚动 。为防止您添加此参数 - behavior:"smooth"。

示例：

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

只需将scroll-here-plz替换为网站上的div或元素即可。如果您在窗口底部看到元素或位置不符合您的预期，请使用参数block: ""。您可以使用block: "start"，block: "end"或block: "center"。

切记：始终在对象{}中使用参数。

如果您仍有问题，请转到https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

此方法有详细的文档。

Answer 12

scrollTop（IIRC）是文档中页面顶部滚动到的位置。 scrollTo滚动页面，使页面顶部位于您指定的位置。

这里需要的是一些Javascript操作样式。假设您想要div离屏并从右侧滚动，您可以将div的left属性设置为页面宽度，然后每隔几秒将其减少一定量，直到它达到您想要的位置。

这应该指向正确的方向。

附加：对不起，我以为你想要一个单独的div来从某个地方'弹出'（有时像这个网站有的那样），而不是将整个页面移动到一个部分。正确使用锚可以达到这种效果。

Answer 13

滚动到DOM元素的一般情况有一个jQuery plugin，但如果性能是一个问题（什么时候不是？），我建议手动执行。这包括两个步骤：

找到要滚动的元素的位置。
滚动到该位置。

quirksmode给出了前者背后机制的一个很好的解释。这是我的首选解决方案：

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

它使用从null到0的转换，这在某些圈子中不是正确的礼节，但我喜欢它:)第二部分使用window.scroll。所以解决方案的其余部分是：

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

瞧！

Answer 14

我个人发现Josh基于jQuery的答案是我见过的最好的答案，并且完美地适用于我的应用......当然，我已经已经使用jQuery ......我当然不会'为了这一目的，我已经包含了整个jQ库。

干杯！

编辑：好的......发布此内容后仅仅几秒钟，我看到另一个答案我的我的（不确定在编辑后是否还在我之下）说要使用：

的document.getElementById（ 'your_element_ID_here'）scrollIntoView（）;

这比jQuery版本的代码要少得多！我不知道在JS中有一个名为.scrollIntoView（）的内置函数，但它确实存在！所以，如果你想要花哨的动画，那就去jQuery吧。快点'脏......用这个！

Answer 15

为了顺利滚动，此代码很有用

$('a[href*=#scrollToDivId]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });

Answer 16

如果我错了，请纠正我，但我一次又一次地阅读这个问题仍然认为Angus McCoteup正在询问如何设置一个元素来定位：固定。

Angus McCoteup，看看http://www.cssplay.co.uk/layouts/fixed.html - 如果你想让你的DIV表现得像那里的菜单，看看那里的CSS

用于将长页面滚动到DIV的JavaScript

16 个答案: