JavaScript scrollTop滚动到错误的div

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 = "•"; 
    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 = "•"; 
    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 = "•"; 
    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 = "•"; 
    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> 

JQ：

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; 
    });