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

Это из-за того, что вы пытаетесь уменьшить разрыв между разделителями круга, уменьшая высоту линии. Последующие divs перекрывают предыдущий, так что, похоже, вы нажимаете на верхнюю часть, вы нажимаете на второй и т. Д.

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