返回顶部的几种方法总结

1.锚点

但是唯一的缺点就是样式不怎么样,会显示这个锚标记。

<a name="top" id="top"></a>

放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可。

页面底部放置:

<a href="#top"target="_self">返回顶部</a>

二、使用Javascript Scroll函数返回顶部

scrooll函数用来控制滚动条的位置,有两种很简单的实现方式:

方式1(推荐:简单方便):

<ahref="javascript:scroll(0,0)">返回顶部</a>

scroll第一个参数是水平位置,第二个参数是垂直位置,比如要想定位在垂直50像素处,改成scroll(0,50)就可以了。

方式2(注重效果:缓慢向上):

本方式是渐进式返回顶部,要好看一些,代码如下:scrollBy函数第二个参数我设了-100,越大(比如-10)滚动越慢,越小滚动越快

function pageScroll() {

window.scrollBy(0,-10);//Only for y vertical-axis

scrolldelay=setTimeout(‘pageScroll()‘,100);}

<a href="pageScroll();">返回顶部</a>   或者<a href="javascript:returnTop();">返回顶部</a>

这样就会动态返回顶部,不过虽然返回到顶部但是代码仍在运行,还需要在pageScroll函数加一句给停止掉。

if(document.documentElement.scrollTop==0)

clearTimeout(scrolldelay);

方式3

document.documentElement.scrollTop = document.body.scrollTop =0;

时间: 2024-11-03 01:31:36

返回顶部的几种方法总结的相关文章

jQuery返回顶部的两种方法(包括go-top.js)

jQuery实现网页"返回顶部"的功能,相信见到这种效果已经不稀奇了吧;那究竟如何实现呢?方法还是挺多了,先介绍两种简单的: 第一种,只使用jquery插件来实现,下面是一个完整的代码例子,有兴趣的自己摸索吧:前端UI分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

网页返回顶部的几种方法

1,在页面顶部固定一个  返回网页顶部的 按钮 .back-to-top { position: fixed; right: 20px; bottom: 10px; width: 100px; height: 30px; text-align: center; line-height: 30px; color: #2C2C2C; text-decoration: none; border: 1px solid #CCCCCC; } <a class="back-to-top" h

返回顶部的3中方法(解决移动端使用zepto没有滑动的效果)

点击返回顶部,三种方法 1.这个方法jQuery使用正常,zepto使用没有动画 //zepto没有动画 $("body").animate({scrollTop: 0}, 500) //zepto使用 $("body").scrollTop(0); 2.这个方法jQuery使用正常,zepto使用没有动画 window.scrollTo(0,0); 3.zepto使用可以有动画 function goTop(acceleration, time) { accele

Activity的跳转及返回值 的四种方法

Activity生命周期 从创建到销毁的生命周期: onCreate()→onStart()→onResume()→onPouse()→onStop()→onDestroy() 从起动到后台再到前台: onCreate()→onStart()→onResume()→onPouse()→onStop()→onRestart()→onStart()→onResume() 启动第二个activity 1.创建new activity 2.创建对应的new xml布局文件 3.在new activity

a超链接之返回顶部的两种实现方法

1.通过css实现: 为页面顶部如body或者自己设置的盒子等加上唯一id属性 <body id="id"> .... <a href="#id">返回顶部</a> 2.js实现 通过设置标签滚动位置判断 document.body.scrollTop=0; <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

Struts2 设置返回参数的四种方法

四种方法设置返回时的参数 (一) import java.util.Map; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; public class LoginAction1 extends ActionSupport { private Map request; private Map session; private Map application; //

HTMl页面中返回顶部的几种实现

??最近在开发网站需要制作返回顶部按钮,但是我主要为后端开发,对前端不太熟练,经过网上资料查询,制作出了返回顶部的按钮,下面是两种简单的方式,记录一下.喜欢本网站的朋友可以收藏下,会不定期更新学习资料. 第一种:引用外部jQuery 新建HTML页面,将下面代码复制保存,通过浏览器打开,即可看到效果. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"&

Android中返回Activity的两种方法

finish返回 finish(): 在你的activity动作完成的时候,或者Activity需要关闭的时候,调用此方法. 当你调用此方法的时候,系统只是将最上面的Activity移出了栈,并没有及时的调用onDestory()方法,其占用的资源也没有被及时释放.因为移出了栈,所以当你点击手机上面的返回按键的时候,也不会再找到这个Activity. onDestory(): 系统销毁了这个Activity的实例在内存中占据的空间.在Activity的生命周期中,onDestory()方法是他生

使用java传参调用exe并且获取程序进度和返回结果的一种方法

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在某个项目中需要考虑使用java后台调用由C#编写的切图程序(exe),并且前端能够获取到切图的进度和相关描述信息. 2.解决思路 a.首先改造切图程序为接受参数从Main函数传递. b.编写java后台传参调用exe的函数. c.解决通信问题. 3.具体实现 3.1改写C#窗体程序 C#中的入口程序为Main函数,其中Main函数默认是没有参数的,如果添加参