Question

在my site中，返回页首按钮将跟随页面，这正是我想要的。但是，如果你的分辨率高于1024x768（我很确定每个人都是这种情况），那么按钮的位置将不在主内容div中。

我可以使用Javascript来检测分辨率，然后从那里调整位置，但如果有更清洁的解决方案，我更喜欢！此外，我不是设计师，所以如果有人有任何化妆品输入，我们将不胜感激！

Answer 1

我有一个解决方案。添加一个div来包装按钮。

<div id="button-wraper">
    <div id="backToTop">
            <a href="#top">
                <img src="site_resources/upArrow.png" style="border: none;z-index: 100;" alt="Back to top">
            </a>
    </div>
</div>

<强> CSS

#button-wraper {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

从position: fixed;移除#backToTop。

另外，请务必将此代码仅放在<div class="footer">之上。

Answer 2

编辑**

试试这个：

<div id="button-wrap">
    <div id="backToTop">
        <a href="#top">
            <img src="site_resources/upArrow.png" style="border: none;z-index: 100;" alt="Back to top" />
        </a>
    </div>
</div>

<强> CSS

#button-wrap {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width:100%;
}

#backToTop {
  position:relative;
  width:1000px;
  margin:0 auto;
  z-index: 1000;
  color: #C6C6C6;
  opacity: 0.3;
}

Answer 3

放

<div id="backToTop">
            <a href="#top">
                <img alt="Back to top" style="border: none;z-index: 100;" src="site_resources/upArrow.png">
            </a>
        </div>

内容div内。移除“左”定位并保持底部位置，它将位于其自然左侧位置，因为您没有任何定义。

实际上，我认为它现在看起来好多了。

返回顶部按钮 - 根据分辨率更改固定位置

3 个答案: