JavaScript将长页面滚动到DIV

我在一个长长的HTML页面上有一个链接。当我单击它时，我希望页面另一部分上的

div

可以通过滚动进入视图在窗口中可见

有点像其他语言中的

ensurerevible

我已经签出了

scrollTop

和

scrollTo

，但它们看起来像是红鲱鱼

---

有人能帮忙吗？

为什么不找一个指定的主播呢？

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

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

答案张贴-相同的解决方案，你的问题

编辑：如果你想要一个平滑的滚动，JQuery的答案是非常好的-我以前没有在操作中看到过这一点。
你需要的属性是location.hash。例如：


location.hash='top'//将跳转到命名锚“顶部”

我不知道如何在不使用dojo或类似的工具箱的情况下制作漂亮的滚动动画，但是如果您只需要它跳转到锚点，location.hash就可以了

（在FF3和Safari 3.1.2上测试）
scrollTop（IIRC）是页面顶部在文档中滚动到的位置。Scroll可滚动页面，使页面顶部位于您指定的位置

这里您需要的是一些Javascript操纵的样式。比如说，如果您想让div离开屏幕并从右侧滚动，您可以将div的left属性设置为页面的宽度，然后每隔几秒钟将其减少一个设置值，直到它达到您想要的位置

这将为您指明正确的方向

附加：对不起，我以为你想从某个地方“弹出”一个单独的div（有点像这个网站有时会这样），而不是将整个页面移动到某个分区。正确使用锚定可以达到此效果。
滚动的困难在于，您可能不仅需要滚动页面以显示div，还需要在任意级别的可滚动div内滚动

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

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

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

这其中的一个步骤如下所示（未经测试的代码，不检查边缘情况）：

如果您不想添加额外的扩展，那么以下代码应该与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;
        }
    });

如果我错了，请纠正我，但我一遍又一遍地阅读这个问题，仍然认为Angus McCoteup在问如何将元素设置为position:fixed

Angus McCoteup，检查-如果你想让你的DIV在那里表现得像一个菜单，看看那里的CSS
在滚动到DOM元素的一般情况下有一个问题，但是如果性能是一个问题（什么时候不是？），我建议手动执行。这包括两个步骤：

查找要滚动到的元素的位置
滚动到那个位置
很好地解释了前者背后的机制。以下是我首选的解决方案：

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

它使用从null到0的强制转换，这在某些圈子里是不合适的，但我喜欢：）第二部分使用
窗口。滚动
。因此解决方案的其余部分是：

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

瞧！
这个老问题，但如果有人通过谷歌（就像我一样）发现了这个问题，谁不想使用锚或jquery；有一个内置的javascriptfunction可以“跳转”到元素

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

更棒的是，根据quirksmode上的兼容性表，这是！
我个人认为Josh上面基于jQuery的答案是我所看到的最好的答案，并且非常适合我的应用程序……当然，我已经在使用jQuery了……我当然不会为了这个目的而包含整个jQ库

干杯

编辑：好的……发布这篇文章几秒钟后，我看到另一个答案就在我的下方（不确定编辑后是否仍在我下方），上面写着使用：

document.getElementById（'your_element_ID_here'）。scrollIntoView（）

这非常好用，代码比jQuery版本少得多！我不知道JS中有一个名为.scrollIntoView（）的内置函数，但它确实存在！因此，如果您想要精美的动画，请使用jQuery.Quick n'dirty…使用此代码！
对于平滑滚动，此代码非常有用

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

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

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

这对我有用

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

您可以使用上面提到的
Element.scrollIntoView（）
方法。如果您在其中没有任何参数，您将有一个即时丑陋的滚动。为了防止添加此参数-
行为：“平滑”

例如：

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

只需将
滚动到此处plz
替换为
div
或网站上的元素。如果您在窗口底部看到元素或位置与预期不符，请使用参数
块：
。您可以使用
块：“开始”
，
块：“结束”
或
块：“居中”“

请记住：始终在对象{}内使用参数

如果您仍然有问题，请转到

这个方法有详细的文档。
Heh…我开始发布一个JavaScript解决方案，然后读了你的解决方案…然后打了我自己一巴掌。干得好！：-）这个问题要求JavaScript完成同样的事情。检查Peter Boughton在中的回答-给div一个id而不是使用命名锚的工作原理相同，但是有更好的语义，需要更少的标记
document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});