Question

我在Fixed position menu and internal links?看到过类似的问题，但我的情况在我看来有点不同，建议的解决方案对我不起作用。

屏幕顶部有一个固定的“仪表板”，下面有一排“卡片”。为了更快地浏览，有“卡片”的内部链接。

问题是当我点击内部链接时，“卡片”的顶部位于屏幕顶部，并且它被“仪表板”覆盖。

https://jsfiddle.net/Marco_Bernardini/bevvw4zp/1/

的示例

CSS：

#Dashboard {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    background: #cf0;
    text-align: center;
}
#TheText {
    margin-top: 40px;
}
.box {
    border: 3px solid #080;
    padding: 0.5em;
    margin: 1em;
}

HTML：

<div id="Dashboard">The general dashboard</div>
<div id="TheText">
    <div id="nav"> <a href="#box_1">box 1</a>
        <br /> <a href="#box_2">box 2</a>
        <br /> <a href="#box_3">box 3</a>
        <br /> <a href="#box_4">box 4</a>
    </div>
    <div id="box_1" class="box">this is the box 1
        <br />a b c
        <br />a b c
        <br />a b c
        <br /><a href="#nav">back to top</a>
    </div>
    <div id="box_2" class="box">this is the box 2
        <br />a b c
        <br />a b c
        <br />a b c
        <br /><a href="#nav">back to top</a>
    </div>
    <div id="box_3" class="box">this is the box 3
        <br />a b c
        <br />a b c
        <br />a b c
        <br /><a href="#nav">back to top</a>
    </div>
    <div id="box_4" class="box">this is the box 4
        <br />a b c
        <br />a b c
        <br />a b c
        <br /><a href="#nav">back to top</a>
    </div>

我有以下约束：

没有jQuery（但我可以在vanilla JS中编写相同的代码）
没有margin-top高于仪表板，或卡之间的空间太大
没有padding-top，这会让卡看起来“丑陋”

有没有办法比调用.scrollTo()？

更好地处理这个问题

解决

毕竟，.scrollTo()解决方案并不是那么糟糕。在工作中看到它： https://jsfiddle.net/Marco_Bernardini/bevvw4zp/4/（提示：缩小输出窗格高度以仅显示一个框来欣赏效果）

HTML：

<div id="Dashboard">The general dashboard
    <select onchange="showBox(this.value)">
        <option value="">Pick a box</option>
        <option value="1">box 1</option>
        <option value="2">box 2</option>
        <option value="3">box 3</option>
        <option value="4">box 4</option>
    </select>
</div>
<div id="TheText">
    <div id="box_1" class="box">this is the box 1
        <br />a b c
        <br />a b c
        <br />a b c</div>
    <div id="box_2" class="box">this is the box 2
        <br />a b c
        <br />a b c
        <br />a b c</div>
    <div id="box_3" class="box">this is the box 3
        <br />a b c
        <br />a b c
        <br />a b c</div>
    <div id="box_4" class="box">this is the box 4
        <br />a b c
        <br />a b c
        <br />a b c</div>
</div>

CSS：如上所述

使用Javascript：

function showBox(el_id) {
    window.scrollTo(0, 0);
    var element = document.getElementById('box_' + el_id);
    var rect = element.getBoundingClientRect();
    var TheTop = rect.top;
    window.scrollTo(0, TheTop - 40);
}

window.scrollTo(0, 0);是重置框坐标，否则它们将被引用到页面的当前位置。

Answer 1

在顶部添加一个div，如下所示：

<div id="top" style="position: absolute; top: 0"></div>

然后提供href为＆＃34; #top＆＃34;为你所有＆＃34;回到顶部＆＃34;内部链接。

<a href="#top">back to top</a>

编辑小提琴：https://jsfiddle.net/bevvw4zp/2/

内部链接，页面顶部有固定的div

1 个答案: