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

实现了我的小跳槽以后，从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 class="top_img"></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样式。

效果图：

赞 (0)

相关推荐

  • js控制的回到页面顶端goTop的代码实现

    js控制的回到页面顶端goTop的代码实现

    有没有见过很多在页面的右下角有个[回到顶端]的悬浮东东,并且在开始时没有,一移动滚动条就出现,回到了顶端又消失的样子. 像: 控制的js代码如下: 复制代码 代码如下: function goTop(){ var _btn = document.getElementById("goTop"); if (document.documentElement && document.documentElement.scrollTop) { var _con = document

  • js滚动条回到顶部的代码

    虽然平滑性处理的不好,但非常适合学习 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="tex

  • 纯文字版返回顶端的js代码

    复制代码 代码如下: <script language="javascript">var goto_top_type = -1;var goto_top_itv = 0;function goto_top_timer() { var y = goto_top_type == 1 ? document.documentElement.scrollTop   : document.body.scrollTop; var moveby = 15; y -= Math.ceil(y

  • 基于jquery的回到页面顶部按钮

    css代码: 复制代码 代码如下: .scroll-up { background: #dcdcdc url('up.png') no-repeat center center; width:48px !important; /*for ff and other standard browser*/ height:48px !important; _width: 58px; /*for IE6 nonstandard box model*/ _height: 58px; position: fi

  • 页面回到顶部的三种实现(锚标记，js)

    本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML(http://www.jb51.net/web/62651.html) 锚标记,也可使用Javascript Scroll (http://www.jb51.net/article/31422.htm) 函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即可,总之简约最美的,能减少代码就减少代码,能不调用的就别调用,要不是天缘博客的文章都是牛长也不会添加这个功能. 一.使用锚标记返回页面顶部 使用

  • 一个简单的弹性返回顶部JS代码实现介绍

    一个简单的弹性返回顶部JS代码实现介绍

    昨天做了一个这样的功能,贴出来参考. HTML/JS/CSS代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • JS实现一键回顶功能示例代码

    1.基础准备: scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offset 指的是滚动条相对于其顶部的偏移. 如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移. 语法 $(selector).scrollTop(offset) 2. toggleClass() 对设置或移除被选元素的一个或多个类进行切换. 例如对设置和移除所有 <p> 元素的 "main" 类进行切换: 复制代码 代码如下: $("button

  • javascript返回顶部效果(自写代码)

    现在很多网站都用到了返回顶部的效果,当然懒的话也可以直接 a 链接链到 #,这样也可以达到效果.今天抽空用原生 javascript 写了个,由于本人水平有限,如有问题请指出. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-回到顶部</title> &

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

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

    实现了我的小跳槽以后,从8月7号入职了现在的这家公司,我好像是加入了救火队的行列,还没有开始开发新的模块,只是一直在实现已经上线模块中的新需求,有时候也真想问问,某些用户的脑子是不是进水了,提出来的需求只想让人大笑三声...幸好项目组做需求的姐姐工作经验十分丰富,能够很好地和用户协调,让我们这些开发人员也没那么辛苦~ 用户在使用系统时,会有很多表单的操作,然而很多表单都是裹脚布啊,长啊长~ 所以就需要一个返回页面顶部的top按钮啦~ 虽然说网上的方法有很多种,但是未免过于繁琐.左一个判断又一个定

  • JS中如何实现点击a标签返回页面顶部的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 400px; } </style> </head> <body> <p>?</p> <a href=&quo

  • vue使用elementUI分页如何实现切换页面时返回页面顶部

    目录 使用elementUI分页实现切换页面时返回页面顶部 原理 实现 element-ui分页el-pagination的坑 1.所有的信息都必须的动态的 2.数据在data里面 3.这是重中之重,认真我的认证 使用elementUI分页实现切换页面时返回页面顶部 原理 给elementUI分页组件的切换页面时触发事件(在这里就是handleCurrentChange函数)添加一个跳转到页顶的方法即可. 实现 <!-- 分页组件 --> <el-pagination  @current

  • JS实现京东首页之页面顶部、Logo和搜索框功能

    JS实现京东首页之页面顶部、Logo和搜索框功能

    昨天我们主要讲了京东首页的基本布局,今天我们主要来逐步实现京东首页的页面顶部.Logo&搜索框.首先我们来看下我们今天将要实现的效果: 下面页面布局详细分析: 1.页面头部分三个部分依次实现:五角星图.收藏京东.右边文字部分(用列表实现): 其中当鼠标停放在手机京东上,手机背景图发生变化,变成红色带jd的图案:当鼠标悬停在客服服务上,出现下拉列表. 2.Logo&搜索框分四个部分实现:左边京东Logo.中间搜索框(上部:快速搜索:下部:热门搜索).右部我的京东&去购物车(步骤类似我

  • javascript返回顶部的按钮实现方法

    本文实例介绍了javascript返回顶部的按钮实现方法,分享给大家供大家参考,具体内容如下 html: <a href="javascript:;" id="btn" title="回到顶部"></a> css: #btn{position:fixed;display:none;} script: 获取滚动条高度:document.documentElement.scrollTop || document.body.sc

  • 基于JS实现回到页面顶部的五种写法(从实现到增强)

    写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" style=&qu

  • JS如何实现在页面上快速定位（锚点跳转问题）

    本文介绍了JS如何实现在页面上快速定位(锚点跳转问题),分享给大家,具体如下: 1. 锚点跳转简介 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到. 锚点跳转有两种形式: a标签 + name / href 属性 使用标签的id属性 在html 4.0以前,只有使用 <a> 标签的 name 属性才能创建片段标识符.id 属性的出现,使所有 HTML 或 XHTML 元素都可以是片段标识符.这是因为 id 标识符几乎可以用在所有的标签中.<a> 标签为了能够

  • 基于JavaScript实现回到页面顶部动画代码

    最近做的都是前端的项目,很多项目都有回到顶部的需求,下面把我写js代码做个笔录,方便以后查找. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS代码如下: //页面加载后触发 window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //获取页面可视区高度 var clientHeigh

  • JS实现部分HTML固定页面顶部随屏滚动效果

    本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果.分享给大家供大家参考,具体如下: 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE.Firefox.Chrome下都能正常工作. 使用这个特效代码需要注意,如

随机推荐