Question

我有这个JS代码：

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

点击后会打开一个新窗口。从第一次点击开始我想要做的就是转到另一个功能。该函数需要一个包含5个div的滚动条。说我希望它转到第三个div或ID，我将如何编写这种类型的函数？所以一个HTML示例是：

<div id="this">
   <div class="outer">
       <div class="innerdiv">
           <div class="1" id="1">1</div>
           <div class="2" id="2">2</div>
           <div class="3" id="3">3</div>
           <div class="4" id="4">4</div>
           <div class="5" id="5">5</div>
        </div>
   </div>
</div>

这将代表我的滚动条。所以在最初的第一次点击时，想法是它会打开一个新窗口并滚动到第3个div，或者如果滚动到它很难，那么转到第一个div。 http://jsfiddle.net/qYTK4/

<div class="arrowbox">
      <div style="display:inline-block; width:155px; height: 50px; float:left;"></div>
      <div class="leftbox" id="leftbox"></div>
      <div class="backtohome"><a href='#' onclick='overlay()' style="text-decoration:none;">BACK TO HOME PAGE</a></div>
<div class="rightbox" id="rightbox"></div>

Answer 1

使用window.scrollTo()并将其移动到对象位置。 Retrieve the position (X,Y) of an HTML element

Answer 2

jQuery.ScrollTo是一个非常棒的简单插件，用于平滑滚动动画。它有很多选项来定义滚动行为，并且非常容易使用。网站上有大量的演示和示例，您应该能够使用它们。你可以告诉它滚动到DOM元素本身或第三个div的jQuery对象/选择器。

此外，您不能将id属性以数字开头（例如您的div），它无效。类可以但不能是ID。

依靠click事件处理程序（即$('.backtohome a').on('click', function() { // your code });）而不是onclick属性也是一个好主意。

jquery有2个函数在点击时连续工作

2 个答案: