网页中返回顶部代码(多种方法)另附注释说明


下面就说下简单的返回顶部效果的代码实现，附注释说明。
1. 最简单的静态返回顶部，点击直接跳转页面顶部，常见于固定放置在页面底部返回顶部功能
方法一：用命名锚点击返回到顶部预设的id为top的元素


代码如下:

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

方法二：操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置）


代码如下:

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

缺点：返回效果是立即的，不符合一般浏览页面的滚动感觉；
静态固定于页面底部，用户不一定看得到。

2. 简单的静态返回顶部，用js模拟滚动效果上滑至顶部


代码如下:

function pageScroll(){
//把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
window.scrollBy(0,-100);
//延时递归调用，模拟滚动向上效果
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);
}

代码如下:

<a onclick="pageScroll()">返回顶部</a>

缺点：滚动效果不平滑，且在页面很长时点击返回顶部，未向上到达页面顶部无法再正常浏览页面；
同上依旧是静态固定于页面底部，不一定能曝光在用户面前。

3. 动态按需加载返回顶部，css侧边屏幕绝对定位，结合简单jQuery动画实现更好体验


代码如下:

function gotoTop(min_height){
//预定义返回顶部的html代码，它的css样式默认为不显示
var gotoTop_html = '<div id="gotoTop">返回顶部</div>';
//将返回顶部的html代码插入页面上id为page的元素的末尾
$("#page").append(gotoTop_html);
$("#gotoTop").click(//定义返回顶部点击向上滚动的动画
function(){$('html,body').animate({scrollTop:0},700);
}).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现
function(){$(this).addClass("hover");},
function(){$(this).removeClass("hover");
});
//获取页面的最小高度，无传入值则默认为600像素
min_height ? min_height = min_height : min_height = 600;
//为窗口的scroll事件绑定处理函数
$(window).scroll(function(){
//获取窗口的滚动条的垂直位置
var s = $(window).scrollTop();
//当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
if( s > min_height){
$("#gotoTop").fadeIn(100);
}else{
$("#gotoTop").fadeOut(200);
};
});
};
gotoTop();

css样式代码：


代码如下:

/*默认样式，主要是position:fixed实现屏幕绝对定位*/
#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;background:#fff;}
/*用CSS表达式(expression)来实现ie6下position:fixed效果*/
#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")}
/*鼠标进入的反馈效果*/
#gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}

这种方法判断页面高度按需将“返回顶部”展示给用户，用css样式实现了屏幕绝对定位，借助jQuery实现了更好用平滑的滚动效果。进一步考虑如果用户设置了浏览器禁用js，那么我们可以将第三方案结合第一方案方法一，禁用js后第三方案将不被用户所见，未禁用的话我们在js代码中再加上一句隐藏第一方案。

总之，长页面还是要尽量避免的，不可避免的情况下，加上“返回顶部”功能可能会带给用户相对好一点的体验。

赞 (0)

相关推荐

  • jquery 实现返回顶部功能

    jquery 实现返回顶部功能

    今天搞了一个回到顶部的JS JQ功能,废话不多说,有图有真相! 复制代码 代码如下: (function($){       $.fn.survey=function(options){  var defaults={width:"298",height:"207"};  var options=$.extend(defaults,options);      if($.browser.msie){      var ieVersion=parseInt($.bro

  • 用jQuery实现的智能隐藏、滑动效果的返回顶部代码

    在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 复制代码 代码如下: <p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p> JS代码: <script type="text/javascript" src="js/jquery-1.7.2.min.js"&g

  • JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)

    首先给这些'返回页首'的链接加上个Class: <a href="#" class="backtotop" target="_self">返回页首↑</a> <!--把所有返回页首的链接加上class,例如:backtotop-->然后加入下面jQuery代码,你可以把这行代码放在</body>前,或者其它位置.当然你还要在<head>里包含jQuery库文件.( 复制代码 代码如下:

  • javascript实现博客园页面右下角返回顶部按钮

    博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素.所以我们选择使用fixed来实现图标固定. absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 &q

  • 一个简单的弹性返回顶部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+JQuery返回顶部功能如何实现

    js+JQuery返回顶部功能如何实现

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以

  • 仿新浪微博返回顶部的jquery实现代码

    一.引言 在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具条上:新浪微博的返回顶部在滚动高度大于0的时候显示,且返回顶部的效果是平滑动画效果.本文的实现就是类似于新浪微博的这种效果. 二.jQuery下的返回顶部功能 您可以狠狠地点击这里:jQuery下的返回顶部demo 可以看到,如果页面有滚动高度,右下角就会有一个含有"返回顶部"字样的黑色背景半透

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

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

  • 基于jquery的返回顶部效果（兼容IE6）

    最近也在学jquery,就顺便记录一下了. HTML 复制代码 代码如下: <div class="scroll"></div> <script type="text/javascript" src="../skins/css/jQuery.js" charset="UTF-8"></script> <script type="text/javascript&qu

  • 网页中返回顶部代码(多种方法)另附注释说明

    网页中返回顶部代码(多种方法)另附注释说明

    下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 复制代码 代码如下: <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) 复制代码 代码如下: <a href=&qu

  • js简单的点击返回顶部效果实现方法

    本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum

  • 网页中右键功能的实现方法之contextMenu的使用

    网页中右键功能的实现方法之contextMenu的使用

    本文介绍一种网页中实现右键功能的方案–contextMenu. 1.下载 下载地址 https://github.com/swisnl/jQuery-contextMenu 下载得到压缩文件jQuery-contextMenu-master.zip 解压后,使用dist目录下css.js. 2.使用方法 使用步骤: (1) 引用css.js. (2) html.js代码. 简单例子如下: 代码test.html: <!DOCTYPE html> <html lang="en&q

  • jQuery实现返回顶部效果的方法

    本文实例讲述了jQuery实现返回顶部效果的方法.分享给大家供大家参考.具体实现方法如下: 1.首先是CSS样式: /*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none} #shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;position:relative;cursor

  • python re正则匹配网页中图片url地址的方法

    最近写了个python抓取必应搜索首页http://cn.bing.com/的背景图片并将此图片更换为我的电脑桌面的程序,在正则匹配图片url时遇到了匹配失败问题. 要抓取的图片地址如图所示: 首先,使用这个pattern reg = re.compile('.*g_img={url: "(http.*?jpg)"') 无论怎么匹配都匹配不到,后来把网页源码抓下来放在notepad++中查看,并用notepad++的正则匹配查找,很轻易就匹配到了,如图: 后来我写了个测试代码,把图片地

  • iOS汇编入门教程之在Xcode工程中嵌入汇编代码的方法

    简介 上一篇文章ARM64汇编基础中介绍了汇编在iOS开发中的应用以及ARM汇编基础知识,本文将介绍在C或Objective-C构成的工程中如何嵌入汇编代码. 注意 在调试ARM汇编时,Xcode的Build对象必须为真机,如果对象为模拟器则是x86汇编. 内联汇编 汇编与C间接通信 在函数中可以直接插入汇编代码来影响函数的运行逻辑,使用的语法为编译指令 __asm__ ,注意插入汇编有可能会被编译器忽略,因此需要加入 __volatile__ 修饰符保证汇编代码有效. 下面给出一个简单的例子,

  • C#中API调用的多种方法

    C#中API调用的多种方法

    介绍 API( Application Programming Interface ),我想大家不会陌生,它是我们Windows编程的常客,虽然基于.Net平台的C#有了强大的类库,但是,我们还是不能否认API在Windows编程中的重要性.大多数的编程语言都支持API编程,而.Net平台中的MFC(Microsoft Foundation Class Library)构架本身就封装了大部分的API. 做为程序员,我们需要了解API从字面上了解便是编程接口,因此,做为开发者,需要了解的只是API

  • 使用pyscript在网页中撰写Python程式的方法

    使用pyscript在网页中撰写Python程式的方法

    根据 Anaconda 的项目 pyscript,可以将 python 的代码直接写在网页中,目前只支援两种标签,分别是<py-script> 与 <py-repl>,以下是简单的示例. 使用这两行导入 pyscript <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow" rel=&

  • requireJS模块化实现返回顶部功能的方法详解

    本文实例讲述了requireJS模块化实现返回顶部功能的方法.分享给大家供大家参考,具体如下: 引用requireJs <script src="require.js" data-main="main"></script> html部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"&g

  • 将RTF格式的文件转成HTML并在网页中显示的代码

    将RTF格式的文件转成HTML并在网页中显示的代码 它是这样工作的,将一个RTF文件上传,然后转成HTML显示出来,代码有点复杂,teaman还要好好研究,好象中文版有点问题. <html>     <body>     <?     if(!($userfile)) {     ?>     <form enctype="multipart/form-data" action="<?print($PHP_SELF);?>

随机推荐