顶部底部按钮重见天日

废弃了很久的功能,感觉还是有点用的,上次停用主要是运行的不太好,可能是直接拿别人的代码,只改了一下样式,没有细心调整,

还好当时只是把代码注释了,并没有删掉,要不然又得一阵忙活.

分析问题,主要在于按钮的定位,定位不准,

在css文件中按钮位置用position:absolute定位,辅助以top,bottom,

以前没有太多考虑块的定位问题,因为代码一直写下,元素的位置都是设计好的,

现在是要在原来没有预留位置的情况下加一些东西进去,加的东西的位置就会成为一个问题,

初衷是让按钮不随页面上下滚动而移动,原代码在实际应用中不能满足需要,

如果窗口还原或者最大化,问题显现,

试图通过改变position的参数来达到效果,

position的参数如下:

static
默认.位置设置为.static.的元素，它始终会处于页面流给予的位置(static.元素会忽略任何.top,bottom,left.或.right.声明).

relative
位置被设置为.relative.的元素，可将其移至相对于其正常位置的地方，因此.”left:20″.会将元素移至元素正常位置左边.20.个像素的位置.

absolute
位置设置为.absolute.的元素，可定位于相对于包含它的元素的指定坐标.此元素的位置可通过.”left”,”top”,”right”.以及.”bottom”.属性来规定.

fixed
位置被设置为.fixed.的元素，可定位于相对于浏览器窗口的指定坐标.此元素的位置可通过.”left”,”top”,”right”.以及”bottom”.属性来规定.不论窗口滚动与否，元素都会留在那个位置.工作于.IE7(strict.模式).

显然前两个不能用,因为占据的空间会使原来的布局混乱,

而后面两个属性,块占据的空间会消失,不影响原布局,

原代码可能还用了JS代码实现该功能,不过我看不懂,假设有这个功能吧 :smilies08:

来做个测试试一下就好了,

结果,不管我把要加的东西放在哪一层,都会以窗口边框定位,而且窗口变化按钮就会消失…

到网上搜了一下,恰好发现一个一样的效果,看他的代码,用的是fixed,

于是问题就明显了,在JS代码上,

原代码的JS有一种滚动页面,按钮平滑滚动的效果,并可以调节平滑滚动的时间,

不过我把按钮固定,这个效果就没有了,但它还在起作用,于是,按钮消失了 :smilies08:

虽然完全不懂JS,自己试着注释了两行(注意,不是删除哦),真的成功了,经测试没有问题,

效果见窗口的右下角.

添加过程见:wordpress添加滚动至顶部,底部,评论的按钮