手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >返回页面顶部top按钮通过锚点实现(自写)
返回页面顶部top按钮通过锚点实现(自写)
摘要:实现了我的小跳槽以后,从8月7号入职了现在的这家公司,我好像是加入了救火队的行列,还没有开始开发新的模块,只是一直在实现已经上线模块中的新需...

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

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

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

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

在<head>标签中加入到页面顶部的锚点:

复制代码 代码如下:

a id="_top"></a>

在<body>的最末尾加入js代码(用div实现):

复制代码 代码如下:

<script type="text/javascript">

function form_top(){

document.write('<div id="form_top"><a href="#_top" title="回到顶部"><div></div></a></div>')

}

form_top();

</script>

设置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按钮通过锚点实现(自写)1

【返回页面顶部top按钮通过锚点实现(自写)】相关文章:

JS函数实现鼠标指向图片后显示大图代码

JavaScript中的blink()方法的使用

javascript瀑布流式图片懒加载实例

jQuery实现html表格动态添加新行的方法

文本框栏目介绍

深入理解JavaScript的React框架的原理

JQuery插件ajaxfileupload.js异步上传文件实例

客户端静态页面玩分页

光标的帖子总结(Range的使用)

新闻内页-JS分页

精品推荐
分类导航