博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角。点击后页面置顶。后面想想写一个Demo来实现这种效果吧。
一. 图标右下角固定.
1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素。所以我们选择使用fixed来实现图标固定.
2.定代码如下。Button按钮将始终置于屏幕右下角。不论是拖动上下精度条还是拉伸浏览器窗口大小.
代码如下:
博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角。点击后页面置顶。后面想想写一个Demo来实现这种效果吧。
一. 图标右下角固定.
1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素。所以我们选择使用fixed来实现图标固定.
2.定代码如下。Button按钮将始终置于屏幕右下角。不论是拖动上下精度条还是拉伸浏览器窗口大小.
function EachScrollBy(eachHeight){ if(document.documentElement.scrollTop<=0){ clearInterval(myVar); }else{ window.scrollBy(0,-30); } }
三. 扩展
实现了置顶按钮。那么我们如何实现点击按钮屏幕置底呢.其实原理差不多,这里就不写demo了。给大家提供一些属性做参考.