窗口滚动到 DIV答案

【问题标题】：Window scroll to DIVs窗口滚动到 DIV
【发布时间】：2010-08-29 17:33:16
【问题描述】：

晚上好，

我一直试图解决这个问题一段时间，但我似乎无法在网上找到足够的资源来找到可行的解决方案 - 也许我还不够努力。

无论如何，我想做的是在整个页面上放置 6 个 div - 使窗口可滚动。我打算有一个导航栏，它在其他所有内容之上都有 z 索引，包含触发滚动的链接。

我只需要了解其中的 jQuery 部分以及我需要参考哪些文件。

PS。如果你认为你知道你的东西，你介意告诉我浮动 div 是否可以被 jQuery 的“偏移”函数读取吗？我正在考虑使用表格并将不同的 div 存储在该表格的单元格中。 :S 我讨厌桌子...

感谢您的帮助。

【问题讨论】：

标签： jquery html scroll

【解决方案1】：

所以你是说你的问题是你有一些 DIV 并且你想从导航链接滚动到它们？

您不需要 JQuery，甚至不需要 Javascript。只需在每个 DIV 的开头放置一个锚标记并导航到该标记。

<DIV id="navigationBar">
   <a href="#section1_nav">Go to section 1</a>
   <a href="#section2_nav">Go to section 2</a>
</DIV>

<DIV id="section1">
   <a name="section1_nav"></a>
</DIV>

<DIV id="section2">
   <a name="section2_nav"></a>
</DIV>

【讨论】：

【解决方案2】：

定位<div> 的最简单方法是使用CSS 绝对定位，您可以了解更多关于in this guide 的信息。这是跨浏览器最一致地显示，并且可以让您对容器的位置进行细粒度控制：

<ul id="nav">
    <li><a href="#first">First</a></li>
    <li><a href="#second">Second</a></li>
    <li><a href="#third">Third</a></li>     
</ul>
<div id="first">First content container</div>
<div id="second">Second content container</div>
<div id="third">Third content container</div>

使用 CSS 如下：

ul {
    position: fixed;
    z-index: 2;
    top: 20px;
    right: 20px;
}

div {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;    
}

#first {
    top: 10px;
    left: 10px;
}

#second {
    top: 1000px;
    left: 500px;
}

#third {
    top: 500px;
    left: 100px;
}

然后要在点击时实际滚动到不同的<div>，您可以使用jQuery scrollTo plugin：

$('a').click(function(e) {
    // Stop default link click from occuring
    e.preventDefault();

    // Scroll to the position using the jQuery scrollTo plugin
    // Element id is taken from link's href attribute
    $(window).scrollTo($(this).attr('href'), {duration: 500});
});

你可以看一个简单的例子in action here。

【讨论】：