javascript - 滚动到 anchor 的开头

Question

我在滚动到 anchor 时遇到问题。我有 3 个问题:

1. 当我浏览两个面板时，我单击了其中一个面板的链接。什么都没发生。

2. 例如，当我打开 D 并单击 C 时，它会转到 C 的末尾。

   点击C之前:

   

   点击C后:

   

3. 当我像这样添加任何 jquery 或 javascript 以滚动到散列时

   函数滚动到(散列){
location.hash = "#"+ hash;
}

   好像不行。

---

我想要什么:

无论用户在哪里，我都希望链接转到 div 的开头(div 的最左边)。

---

我的代码

我有这样一个页面:

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>

其中每个 div 通过 css 都是这个屏幕大小，如下所示:

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

这是 updated fiddle .