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