Question

晚上好，

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

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

我需要了解的是它的jQuery部分以及我需要引用的文件。

PS。如果你认为你知道你的东西，你会介意告诉我浮动div是否可以通过jQuery的“偏移”功能读取？我正在考虑使用a表并将不同的div存储在该表的单元格中。：我讨厌表......

感谢您的帮助。

Answer 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>

Answer 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。

窗口滚动到DIV

2 个答案: