html css 返回顶部按钮位置怎么固定？

html-css0150

html css 返回顶部按钮位置怎么固定？,第1张

可以使用相当于浏览器定位。css样式中写入：\x0d\x0a{position: fixed\x0d\x0a right: 20px\x0d\x0a bottom: 100px}相当于浏览器右边20px，浏览器底部100px的距离的定位。\x0d\x0afixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。

例子代码及效果如下：

<div style="margin:0px padding:5px width:15px height:90px position:fixed bottom:100px right:150px background-color:#00cc33 font-family:'微软雅黑'">返回顶部</div>

核心有三个：

1、position:fixed >>表示位置不随滚动条滚动

2、bottom:100px >>表示该div距浏览器下边缘100像素

3、right:150px >>表示该div距离浏览器右边缘150像素

position:fixed bottom:100px right:150px

那部分的效果如下图，不会根据浏览器滚动条的拖动而改变位置：

第一步：

打开

E:\xampp\htdocs\magento\skin\frontend\default\bluescale\css\styles.css

在底部添加返回按钮css代码，如下：

/* Back Button */

.product-back {

text-align: right

padding: 8px 24px 10px 0

}

第二步：

打开

app\design\frontend\default\default\template\catalog\product\view.phtml

在适当的地方添加红色部分代码就可以了。（红色代码可以放在你自己想要的位置，不一定是和我这样。）

//]]>

</script>

</div>

<div class="product-back">

<a href="javascript:history.back()" class="form-button-alt" ><?php echo $this->__('Back') ?></a>

</div>

<div class="product-collateral">

第三步：

保存更改的文件，刷新你的浏览器。