JavaScript scrollTop scrolling to wrong div

Question

So, I am dynamically adding a "side navigation" bar using JavaScript. It has circles, which when clicked, will take you to a certain DIV on the page. For some reason, it isn't scrolling to the correct div.

For example, I have a div Circle1, which when clicked, should you the user to the top of the page. BUT, it is taking the user to the div A (which should be scrolled to when Circle2 is clicked).

Basically, every onClick function for each of my circles is off by 1. Here is JSFiddle to demonstrate: http://jsfiddle.net/zu6516eu/9/

Any ideas? Thanks

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

Full Code

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

James Thorpe · Accepted Answer · 2014-09-30 20:35:19Z

2

It's because of the way you're trying to reduce the gap between the circle divs by reducing the line height. Subsequent divs are overlapping the previous one, so whilst it looks like you're clicking the top, you're actually clicking the second etc.

Here is an updated fiddle that gets around the problem by not using massively scaled up bullet points - it uses a circular div instead.

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

edited Sep 30, 2014 at 20:35

answered Sep 30, 2014 at 20:25

James Thorpe

32.3k6 gold badges76 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Harry Over a year ago

I realized it is line-height: .5em; that was making the div mess up. here is the fiddle without line-height: jsfiddle.net/zu6516eu/15 what is the best way to reduce the gaps between? Thanks a lot

James Thorpe Over a year ago

@Harry see my updated answer/fiddle - the issue was more around using the huge font size for the bullets. Using this method means you're not trying to make something big small again - it's just rendered as it should be

Harry Over a year ago

Thanks. I'll check it out. Would there be an easier way to implement this entire thing to avoid this problem?

James Thorpe Over a year ago

Probably - but that's starting to get out of scope of this question! When you get something together that works, you can always post it over at Code Review for comments on how to improve it :)

Brian Bolli · Accepted Answer · 2014-09-30 20:24:02Z

1

The issue was you didn't have enough document at the end of your webpage for the scrollTo to properly align. So it would scroll to the lowest point it could before the end of the page prevent any further vertical scrolling. I added about 20 or so more

<p>Hello</p>

to the end of your fiddle's HTML and updated. Now when you click the circles the DIV B and DIV C align perfectly at the top.

answered Sep 30, 2014 at 20:24

Brian Bolli

1,8731 gold badge12 silver badges14 bronze badges

Comments

Foxsk8 · Accepted Answer · 2014-09-30 20:29:50Z

0

Just simply use a html anchor to scrool on click to right place.

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

answered Sep 30, 2014 at 20:29

Foxsk8

3081 gold badge9 silver badges21 bronze badges

Collectives™ on Stack Overflow

JavaScript scrollTop scrolling to wrong div

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related