滚动到锚点的开头

Question

我无法滚动到锚点。 我有3个问题：

1. 当我超过两个面板时，我点击其中一个面板的链接。什么都没发生。

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

   点击C：

   之前

   

   点击C：

   

3. 当我添加任何jquery或javascript这样滚动到哈希

   时

   function scrollTo(hash) { 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。