社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 返回页面顶部top按钮通过锚点实现(自写)_javascript技巧

返回页面顶部top按钮通过锚点实现(自写)_javascript技巧

WBOY
发布： 2016-05-16 17:23:49
原创
1173 人浏览过

实现了我的小跳槽以后，从8月7号入职了现在的这家公司，我好像是加入了救火队的行列，还没有开始开发新的模块，只是一直在实现已经上线模块中的新需求，有时候也真想问问，某些用户的脑子是不是进水了，提出来的需求只想让人大笑三声。。。幸好项目组做需求的姐姐工作经验十分丰富，能够很好地和用户协调，让我们这些开发人员也没那么辛苦~

用户在使用系统时，会有很多表单的操作，然而很多表单都是裹脚布啊，长啊长~

所以就需要一个返回页面顶部的top按钮啦~

虽然说网上的方法有很多种，但是未免过于繁琐。左一个判断又一个定位，总之，太麻烦啦~前人的代码拿来就用有时候是节约时间，但还是要根据系统的性能来综合考虑，为了不给浏览器以及服务器带来不必要的压力，我还是决定自己写一个top按钮~

在

标签中加入到页面顶部的锚点：
复制代码 代码如下:

a id="_top">

在的最末尾加入js代码（用div实现）：
复制代码 代码如下:

')
}
form_top();


设置top按钮的css样式（让div始终在页面右下角）：
复制代码 代码如下:

#form_top{display:block; bottom:3px; right:3px; position:fixed;}
.top_img{
background-image: url("img/top.png");
width: 40px;
height:40px;
cursor: pointer;
}

最后，别忘了在jsp页面中引入css样式。

效果图：
返回页面顶部top按钮通过锚点实现(自写)_javascript技巧
相关标签：
返回顶部
来源：php.cn
上一篇：jQuery动态添加删除select项(实现代码)_jquery 下一篇：js Math 对象的方法_基础知识
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
来自于 2024-04-06 21:55:20
0
1
778
获取输入字段的总返回值方法 我正在尝试查找用户输入的总价值。得到将数字与其相同值相乘的聚合letDem200=document.querySelector(".input_200");le...
来自于 2024-04-06 18:19:37
0
1
380
实体仓库扩展了JpaRepository<Entity, Id>和JpaSpecificationExecutor<Entity>，EntitySpec扩展了Specification<Entity> 这是我的端点http://localhost:8080/country/all回复所有国家都可以当我想过滤它们时返回未找到国家为空并返回异常thrownewRecordNotFou...
来自于 2024-04-06 17:11:03
0
1
421
使用Eloquent进行内部查询 图像地址包含位置和用户总数。Users::with(['address'=>function($query){$query->where('location','NAX...
来自于 2024-04-06 16:45:50
0
1
515
使用 Javascript / Jquery 提交表单且不带按钮 我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...
来自于 2024-04-06 14:54:03
0
2
421
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板