Question

所以，我正在使用JavaScript动态添加“侧面导航”栏。它有圆圈，点击后会转到页面上的某个DIV。出于某种原因，它不会滚动到正确的div。

例如，我有一个div Circle1，点击后，用户应该在页面顶部。但是，它将用户带到div A（当点击Circle2时应该滚动到它）。

基本上，我的每个圈子的每个onClick功能都是1.这是JSFiddle演示：http://jsfiddle.net/zu6516eu/9/

有什么想法吗？感谢

 document.getElementById('Circle1').onclick = function() {
    scrollToTop();
  };

完整代码

var offset = 0;

//initialize side nav bar
jQuery(document).ready(function() {
  var SideBar = document.createElement("Div");
  SideBar.setAttribute("id", "SideBarNav");
  SideBar.style.color = "white";
  SideBar.style.display = "inline-block";
  SideBar.style.position = "fixed";
  SideBar.style.top = "50%";
  SideBar.style.right = "0";
  SideBar.style.transform = "translate(-50%, -50%)";
  SideBar.style.textAlign = "center";
  SideBar.style.border = "2px solid rgba(0, 0, 255, 0.5)";

  var Circle1 = document.createElement("Div");
  Circle1.innerHTML = "&bull;";
  Circle1.setAttribute("id", "Circle1");
  Circle1.style.textAlign = "center";
  Circle1.style.fontSize = "3.5em";
  Circle1.style.margin = "0 auto";
  Circle1.style.opacity = ".7";
  Circle1.style.color = "blue";
  Circle1.style.lineHeight = ".5em";

  var Circle2 = document.createElement("Div");
  Circle2.innerHTML = "&bull;";
  Circle2.setAttribute("id", "Circle2");
  Circle2.style.textAlign = "center";
  Circle2.style.fontSize = "3.5em";
  Circle2.style.margin = "0 auto";
  Circle2.style.opacity = ".1";
  Circle2.style.color = "blue";
  Circle2.style.lineHeight = ".5em";

  var Circle3 = document.createElement("Div");
  Circle3.innerHTML = "&bull;";
  Circle3.setAttribute("id", "Circle3");
  Circle3.style.textAlign = "center";
  Circle3.style.fontSize = "3.5em";
  Circle3.style.margin = "0 auto";
  Circle3.style.opacity = ".1";
  Circle3.style.color = "blue";
  Circle3.style.lineHeight = ".5em";

  var Circle4 = document.createElement("Div");
  Circle4.innerHTML = "&bull;";
  Circle4.setAttribute("id", "Circle4");
  Circle4.style.textAlign = "center";
  Circle4.style.fontSize = "3.5em";
  Circle4.style.margin = "0 auto";
  Circle4.style.opacity = ".1";
  Circle4.style.color = "blue";
  Circle4.style.lineHeight = ".5em";

  SideBar.appendChild(Circle1);
  SideBar.appendChild(Circle2);
  SideBar.appendChild(Circle3);
  SideBar.appendChild(Circle4);
  document.body.appendChild(SideBar);

  document.getElementById('Circle1').onclick = function() {
    scrollToTop();
  };
  document.getElementById('Circle2').onclick = function() {
    scrollFunction(A);
  };
  document.getElementById('Circle3').onclick = function() {
    scrollFunction(B);
  };
  document.getElementById('Circle4').onclick = function() {
    scrollFunction(C);
  };
  offset = jQuery(".row.span_24").height();
  console.log(offset);
});

function scrollFunction(targetString) {
  var target = jQuery(targetString);
  if (target.length) {
    console.log(offset);
    var top = target.offset().top - offset;
    jQuery('html, body').animate({
      scrollTop: $(target).offset().top - 15
    }, 'slow');
    return false;
  }
}

function scrollToTop() {
  jQuery('html, body').animate({
    scrollTop: 0
  }, 'slow');
}

Answer 1

这是因为您通过降低线高来尝试缩小圆形div之间的差距。后续的div与前一个div重叠，所以虽然看起来你点击了顶部，但实际上你点击了第二个等等。

Here is an updated fiddle通过不使用大规模扩大的子弹点解决问题 - 它使用圆形div代替。

#Circle1, #Circle2, #Circle3, #Circle4 {
    background-color:blue;
    height:10px;
    width:10px;
    border-radius:5px;
    margin:2px;
}

Answer 2

问题是您在网页末尾没有足够的文档来使scrollTo正确对齐。因此，它会滚动到页面结尾之前可以阻止任何进一步垂直滚动的最低点。我添加了大约20个左右的

<p>Hello</p>

到你小提琴的HTML结尾并更新。现在，当您点击圆圈时，DIV B和DIV C在顶部完美对齐。

Answer 3

只需使用html锚点就可以点击向右滚动。

HTML：

<div class="element"><a href="#test">Go to test</a></div>
<div id="test"></div>

问：

    var $root = $('html, body');
    $('.element a').click(function() {
        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top
        }, 500, function () {
            window.location.hash = href;
        });
        return false;
    });

JavaScript scrollTop滚动到错误的div

3 个答案: