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

Question

在我的站点中，返回顶部按钮将跟随页面，这正是我想要的。但是，如果您的分辨率高于 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="backToTop">
            <a href="#top">
                <img alt="Back to top" style="border: none;z-index: 100;" src="site_resources/upArrow.png">
            </a>
        </div>

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

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

Answer 3

编辑**

尝试这个：

<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;
}