如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
html回到顶部，在顶部的时候不输出按钮
来源：互联网
2023-03-16 19:11:29 202
在做详情页的时候，有时候页面很长，需要我们做按钮返回顶部，那么怎么操作页面呢。一般的流程是定位按钮在页面中，点击按钮触发函数回到顶部，判断收起来按钮，默认按钮隐藏，当滚动条滚动产生距离就会出现按钮
工具/原料
- css局部
- scrollTop()设置 元素中滚动条的垂直偏移：
方法/步骤
当滚动条距离顶部产生一定距离的时候，就可以让其显示出按钮，注意灵活一点，有滚动条滚动就出现
定义按钮模块，如图所示，也是和局部的写法，箭头为图标，通p标签的存放一张图标，下面的文字，样式按照自己的喜欢去调整
进行判断$(window).scrollTop()为滚动条距离顶部的高度，如何等于零就是距离顶部为0就是在顶部状态隐藏按钮，否则打开
定义按钮点击触发的函数，写的函数需要定义一些变量下面再进行对比判断
var d = document,
dd = document.documentElement,
db = document.body,
top = dd.scrollTop || db.scrollTop,
step = Math.floor(top / 30);
这是平滑效果好一点的方法，可以点击调用
function pageScroll(){
var d = document,
dd = document.documentElement,
db = document.body,
top = dd.scrollTop || db.scrollTop,
step = Math.floor(top / 30);
(function() {
top -= step;
if (top > -step) {
dd.scrollTop == 0 ? db.scrollTop = top: dd.scrollTop = top;
setTimeout(arguments.callee, 30);
}
})();
}
这个方法滑动效果不是那么理想
//方案二
function pageScroll(){
//把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
window.scrollBy(0,-500);
//延时递归调用，模拟滚动向上效果
scrolldelay = setTimeout('pageScroll()',100);
//获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
var sTop=document.documentElement.scrollTop document.body.scrollTop;
//判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
if(sTop==0) clearTimeout(scrolldelay);
}
注意事项
- 注意获取通过获取滚动条距离的高度进行判断，
- 注意简化代码效果好的就使用
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 435 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)