在我的站点中,返回顶部按钮将跟随页面,这正是我想要的。但是,如果您的分辨率高于 1024x768(我很确定每个人都是如此),则按钮的位置不会在主要内容 div 内。
我可以使用 Javascript 来检测分辨率,然后从那里调整位置,但如果有更清洁的解决方案,我更愿意!另外,我不是设计师,所以如果有人有任何化妆品方面的意见,将不胜感激!
在我的站点中,返回顶部按钮将跟随页面,这正是我想要的。但是,如果您的分辨率高于 1024x768(我很确定每个人都是如此),则按钮的位置不会在主要内容 div 内。
我可以使用 Javascript 来检测分辨率,然后从那里调整位置,但如果有更清洁的解决方案,我更愿意!另外,我不是设计师,所以如果有人有任何化妆品方面的意见,将不胜感激!
我有一个解决方案。添加一个 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">
仅将此代码放在上面。
放
<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 中。删除“左”定位并保留底部,它将位于其自然左侧位置,因为您没有定义任何内容。
但实际上,我认为它现在看起来好多了。
编辑**
尝试这个:
<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;
}