Scrolling to start snapping

Question

I'm having trouble scrolling to anchors. I have 3 problems:

• When I go to two panels, I click on a link to one of the panels. Nothing happened.

• When I am, for example, D, and I press C, it goes to the end of C.

  Before clicking on C:

  

  After pressing the C button:

  

• When I add jquery or javascript like this to go to hashes

  function scrollTo(hash) { location.hash = "#" + hash; }

  he does not work.

---

What I would like:

I need a link to go to the top of the div (the farthest to the left of the div) no matter where the user is located.

---

My code

I have a page like this:

HTML:

<ul class="links">
    <li><a href="#a">A</a></li>
    <li><a href="#b">B</a></li>
    <li><a href="#c">C</a></li>
    <li><a href="#d">D</a></li>
</ul>
<div class="panels">
    <div class="panel" id="a">I'am A</div>
    <div class="panel" id="b">I'am B</div>
    <div class="panel" id="c"><span class="stupid-long-content">I'am C (very long)</span></div>
    <div class="panel" id="d">I'am D</div>
</div>

Where each div is the screen size using css , like this:

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

html, body
{
   height:100%;  
}
body
{
    margin:0;
    padding:0;  
}

.panels
{
    white-space: nowrap;
    height: inherit;
}

.panel
{
   height: inherit;
   font-size: 20px;
   text-align: center;
   padding: 60px;
   display: inline-block;
   min-width: 100%;
}

.stupid-long-content
{
    width: 3000px;
    display: block;
}

JSFIDDLE

Answer 1

jQuery scrollLeft :

$('.links a').click(function(e) {
    e.preventDefault();
    if (this.hash)
        $('body, html').scrollLeft($(this.hash).offset().left);
});

.