HTML5商城开发五 实现返回页面顶部

本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等。

一、使用锚标记返回页面顶部

使用HTML锚标记最简单,点击后会在地址栏显示这个锚标记。

需要标记id特麻烦,尤其是每个页面都要使用,顶部展示又不一样。

页面顶部放置:

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

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

页面底部放置:

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

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

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

方式1:

[javascript] view plaincopy

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

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

方式2:

本方式是渐进式返回顶部,要好看一些,代码如下:

[javascript] view plaincopy

  1. function pageScroll() {  
  2. window.scrollBy(0,-10);  
  3. scrolldelay = setTimeout('pageScroll()',100);  
  4.   
  5. }  
  6. <a href="pageScroll();" mce_href="pageScroll();">返回顶部</a>  

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

[javascript] view plaincopy

  1. if(document.body.scrollTop==0) clearTimeout(scrolldelay);  

三、使用Onload加上scroll功能实现动态返回顶部

1、首先在网页BODY标签结束之前加上:

<div id="gotop">返回顶部</div>

2、再调用以下JS脚本部分:

[c-sharp] view plaincopy

  1. BackTop=function(btnId){  
  2.     var btn=document.getElementById(btnId);  
  3.   
  4.     var d=document.documentElement;  
  5.    
  6.     window.onscroll=set;  
  7.    
  8.     btn.onclick=function (){  
  9.    
  10.         btn.style.display="none";  
  11.   
  12.         window.onscroll=null;  
  13.    
  14.         this.timer=setInterval(function(){  
  15.    
  16.             d.scrollTop-=Math.ceil(d.scrollTop*0.1);  
  17.    
  18.             if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);  
  19.    
  20.         },10);  
  21.    
  22.     };  
  23.    
  24.     function set(){btn.style.display=d.scrollTop?'block':"none"}  
  25.    
  26. };  
  27.    
  28. BackTop('gotop');  

对Z-BLOG而言,可以放到$(document).ready(function(){....函数中,也可以独立存成一个js文件,比如gotop.js,再通过:

<SCRIPT src="/js/gotop.js" type=text/javascript></SCRIPT>

来调用,当然了位置最好放在“返回顶部”标签的下面,该调用方法已假设路径为JS,其它位置请自行修改。

四、以一定的速度滑动返回顶部

$(".totop").click(function () {
        var speed = 200;//滑动的速度
        $('html,body').animate({ scrollTop: 0 }, speed);//去顶部        $('html,body').animate({ scrollTop: $('#footer').offset().top }, speed);//去底部 }); 

 最喜欢这种效果,简单又能动态往上滚动。

 

 

主要参考:

http://www.mediacollege.com/internet/javascript/page/scroll.html

http://blog.csdn.net/w3031213101/article/details/6363858

 

时间: 2024-07-30 10:58:00

HTML5商城开发五 实现返回页面顶部的相关文章

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

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

JS返回页面顶部实现程序代码

方法一,纯css实现方法 页面顶部放置:  代码如下 复制代码 <a name="top" id="top"></a> 放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可. 页面底部放置:  代码如下 复制代码 <a href="#top" target="_self">返回顶部</a> 方法二,js带css实现方法 本方式是渐进式返回顶部,要好看一

Java Web 开发多个返回页面问题

问题描述 我开发了一个平台,具体流程是:用户发信息到指定号码,移动运营商接收信息后通过URL访问我的系统,将数据存到数据库,然后返回接收成功的页面信息(页面1)给运营商,之后程序要继续执行,处理接收到的数据,处理完之后还有返回一个处理成功的页面(页面2).现在问题来了,一个Action只能做一次转发或重定向或返回Forward,而且页面1在运营商那边不是通过浏览器解释执行的,只是接收到了页面1的源代码,这就无法在页面1中自动调用新的Action执行后续处理功能.请问这种问题该怎么解决?有谁遇到过

仿CSDN Blog返回页面顶部功能实现原理及代码

只修改了2个地方: ,返回的速度-->改成了慢慢回去.(原来是一闪而返回) ,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来.(原来是向下滚动500px后才显示) 注意:JS务必要写在 Html之后: HTML   复制代码 代码如下: <div id="d-top" style="display:none;"> <a id="d-top-a" href="#" title="

HTML5商城开发一 楼层滚动加载数据

对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300) <div id="subCategoryScroll" style="overflow: hidden; overflow-y: scroll;"> <ul clas

HTML5商城开发二 通过位移实现拖动效果

1.效果 在该区域内,手按住拖动,该模块可上下滑动,至最顶或最底部,滑动出现空白区域将自动缩回 2.代码 <!DOCTYPE html> <html> <head> <title>首页</title> <style type="text/css"> .area-item { height: 100px; line-height:100px; border-bottom: 1px solid #333; font-s

HTML5商城开发四 多图或多商品的水平滚动展示

一.效果图   二.实现 样式: .horz_scroll { float: left; width: 20px; height: 130px; padding-top: 100px; padding-left: 15px; padding-right: 15px; cursor: pointer; } .horz_scroll:hover { background-color: #e9e9e9; } 事件 <script type="text/javascript"> $

HTML5商城开发三 jquery 星星评分插件

展示:   实现方法: 1.html引用star-grade.js <script type="text/javascript" src="Scripts/star-grade.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".sstar").BindStars();//使用属性

回到页面顶部的方法总结

一.使用锚点链接 毫无疑问,使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后我们在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置. 示例代码如下: <!-- 定义一个名称为top的锚点链接 --> <a name="top"></a> <!-- 这里是网页主体内容,此处省略 --> <!-- 返回页面顶部top锚点的链接 --> <a hr