javascript – 滚动到锚点的开头

2024年1月28日 183次阅读

我无法滚动到锚点.

我有3个问题：

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

>当我在例如D和我点击C时它会到达C的末尾.

在点击C之前：

点击C后：

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

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

最佳答案 您可以使用jQuery scrollLeft函数并阻止默认的浏览器处理：

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

这是updated fiddle.

点赞