I'm having issues with scrolling to anchors and encountering 3 specific problems:
If I hover over two panels and click a link to one of them, nothing happens.
When I'm on section D and click on section C, it scrolls to the end of section C.
Before clicking on C:
After clicking on C:
Attempting to add jQuery or JavaScript like this to scroll to the hashes:
function scrollTo(hash) { location.hash = "#" + hash; }doesn't seem to work as expected.
Desired Outcome:
I want the link to always navigate to the beginning of the div (farthest left) regardless of the user's current position.
My Code:
The structure of my page is as follows:
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>
Each div occupies the screen size through css, defined as:
*
{
-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;
}