页面回到顶部的三种实现,jQuery回到顶部的代码
分类:关于美高梅

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。

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

在一些网站上,我们经常见到返回顶部的效果,本文给大家介绍基于jquery如何实现返回顶部效果。感兴趣的朋友跟着小编一起看下实现代码吧。

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

首先需要在顶部添加如下html元素:

复制代码 代码如下:

首先需要在顶部添加如下html元素:

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

<p id="back-to-top"><a href="#top" rel="external nofollow" >返回顶部</a></p>

/*returnTop*/
p#back-to-top{
position:fixed;
display:none;
bottom:100px;
right:80px;
}
p#back-to-top a{
text-align:center;
text-decoration:none;
color:#d1d1d1;
display:block;
width:64px;
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}
p#back-to-top a:hover{
color:#979797;
}
p#back-to-top a span{
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;
border-radius:6px;
display:block;
height:64px;
width:56px;
margin-bottom:5px;
/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
}
#back-to-top a:hover span{
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;
}

<p id="back-to-top"><a href="#top">返回顶部</a></p> 

使用HTML锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记,其它的倒没什么。
页面顶部放置:
<a name="top" id="top"></a>
放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可。
页面底部放置:
<a href="#top" target="_self">返回顶部</a>

其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。

上面样式中的背景图片是雪碧图,下面提供两个单独的返回顶部图片方便朋友们使用:
图片 1 图片 2图片 3图片 4  图片 5
有了html和样式,我们还需要用js控制返回顶部按钮,在页面滚动时渐隐渐现返回顶部按钮。

其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。

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

要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:

复制代码 代码如下:

要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:

scrooll函数用来控制滚动条的位置,有两种很简单的实现方式:
方式1:
<a href="javascript:scroll(0,0)">返回顶部</a>
scroll第一个参数是水平位置,第二个参数是垂直位置,比如要想定位在垂直50像素处,改成scroll(0,50)就可以了。
方式2:
本方式是渐进式返回顶部,要好看一些,代码如下:

/*returnTop*/ 
p#back-to-top{ 
position:fixed; 
display:none; 
bottom:100px; 
right:80px; 
} 
p#back-to-top a{ 
text-align:center; 
text-decoration:none; 
color:#d1d1d1; 
display:block; 
width:64px; 
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ 
-moz-transition:color 1s; 
-webkit-transition:color 1s; 
-o-transition:color 1s; 
} 
p#back-to-top a:hover{ 
color:#979797; 
} 
p#back-to-top a span{ 
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; 
border-radius:6px; 
display:block; 
height:64px; 
width:56px; 
margin-bottom:5px; 
/*使用CSS3中的transition属性给标签背景颜色添加渐变效果*/ 
-moz-transition:background 1s; 
-webkit-transition:background 1s; 
-o-transition:background 1s; 
} 
#back-to-top a:hover span{ 
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; 
}

<script src=";
<script>
$(function(){
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500);
}
else
{
$("#back-to-top").fadeOut(1500);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});
});
</script>

/*returnTop*/ 
p#back-to-top{ 
position:fixed; 
display:none; 
bottom:100px; 
right:80px; 
} 
p#back-to-top a{ 
text-align:center; 
text-decoration:none; 
color:#d1d1d1; 
display:block; 
width:64px; 
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ 
-moz-transition:color 1s; 
-webkit-transition:color 1s; 
-o-transition:color 1s; 
} 
p#back-to-top a:hover{ 
color:#979797; 
} 
p#back-to-top a span{ 
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; 
border-radius:6px; 
display:block; 
height:64px; 
width:56px; 
margin-bottom:5px; 
/*使用CSS3中的transition属性给标签背景颜色添加渐变效果*/ 
-moz-transition:background 1s; 
-webkit-transition:background 1s; 
-o-transition:background 1s; 
} 
#back-to-top a:hover span{ 
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; 
} 

复制代码 代码如下:

上面样式中的背景图片是雪碧图,下面提供两个单独的返回顶部图片方便朋友们使用:

这样就可以了,你可以通过下面的地址观看实际的效果:

注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。

  上面样式中的背景图片是雪碧图,下面提供两个单独的返回顶部图片方便朋友们使用:

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

图片 6

您可能感兴趣的文章:

  • 一个简单的弹性返回顶部JS代码实现介绍
  • javascript返回顶部效果(自写代码)
  • js简单的点击返回顶部效果实现方法
  • jQuery实现返回顶部功能适合不支持js的浏览器
  • javascript实现博客园页面右下角返回顶部按钮
  • javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
  • js返回顶部实例分享
  • 原生js实现返回顶部缓冲效果
  • js实现返回顶部效果
  • JS返回顶部实例代码

图片 7 图片 8图片 9 图片 10 图片 11

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

有了html和样式,我们还需要用js控制返回顶部按钮,在页面滚动时渐隐渐现返回顶部按钮。

有了html和样式,我们还需要用js控制返回顶部按钮,在页面滚动时渐隐渐现返回顶部按钮。

复制代码 代码如下:

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> 
<script> 
$(function(){ 
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 
$(function () { 
$(window).scroll(function(){ 
if ($(window).scrollTop()>100){ 
$("#back-to-top").fadeIn(1500); 
} 
else 
{ 
$("#back-to-top").fadeOut(1500); 
} 
}); 

//当点击跳转链接后,回到页面顶部位置 

$("#back-to-top").click(function(){ 
$('body,html').animate({scrollTop:0},1000); 
return false; 
}); 
}); 
}); 
</script>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> 
<script> 
$(function(){ 
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 
$(function () { 
$(window).scroll(function(){ 
if ($(window).scrollTop()>100){ 
$("#back-to-top").fadeIn(1500); 
} 
else 
{ 
$("#back-to-top").fadeOut(1500); 
} 
}); 

//当点击跳转链接后,回到页面顶部位置 

$("#back-to-top").click(function(){ 
$('body,html').animate({scrollTop:0},1000); 
return false; 
}); 
}); 
}); 
</script> 

if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay);

这样就可以了。

这样就可以了。

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

注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。

注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。

1、首先在网页BODY标签结束之前加上:
<div id="gotop">返回顶部</div>
2、再调用以下JS脚本部分(本脚本非天缘原创,早前来源于Z-BLOG官方论坛上收集,源包未带作者链接,如果原作者看到敬请留言添加):

您可能感兴趣的文章:

  • js+JQuery返回顶部功能如何实现
  • 一个简单的弹性返回顶部JS代码实现介绍
  • javascript返回顶部效果(自写代码)
  • js简单的点击返回顶部效果实现方法
  • javascript实现博客园页面右下角返回顶部按钮
  • javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
  • js返回顶部实例分享
  • 原生js实现返回顶部缓冲效果
  • js实现返回顶部效果
  • JS返回顶部实例代码

下面在给大家分享一段jquery回到顶部代码

复制代码 代码如下:

  1. 页面内容较多, 从底部超链接 点击回到页面顶部

BackTop=function(btnId){
var btn=document.getElementById(btnId);
var d=document.documentElement;
window.onscroll=set;
btn.onclick=function (){
btn.style.display="none";
window.onscroll=null;
this.timer=setInterval(function(){
d.scrollTop-=Math.ceil(d.scrollTop*0.1);
if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);
},10);
};
function set(){btn.style.display=d.scrollTop?'block':"none"}
};
BackTop('gotop');

// 回到顶部
var $top = $('<a class="doc-gotop" href="javascript:;">TOP</a>')
.on('click', function () {
$(window).scrollTop(0);
return false;
});
$('body').append($top);

对Z-BLOG而言,可以放到$(document).ready(function(){....函数中,也可以独立存成一个js文件,比如gotop.js,再通过:
<SCRIPT src="/js/gotop.js" type=text/javascript></SCRIPT>
来调用,当然了位置最好放在“返回顶部”标签的下面,该调用方法已假设路径为JS,其它位置请自行修改。
补充:
上述返回顶部代码都是文字式样的,也可以把文字更换为漂亮一点的图标,另外还有悬浮状的返回顶部代码(就是页面滚动时,返回顶部图标也会跟着跑的那种),需要使用到层等,搞的有点复杂了,本文暂不列出。

您可能感兴趣的文章:

  • jquery实现的动态回到顶部特效代码
  • jquery实现点击页面回到顶部
  • jQuery实现带有动画效果的回到顶部和底部代码
  • jquery网页回到顶部效果(图标渐隐,自写)
  • jQuery实现分章节锚点“回到顶部”动画特效代码
  • jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
  • 如何利用JQuery实现从底部回到顶部的功能
  • js+JQuery返回顶部功能如何实现
  • jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
  • jquery实现固定顶部导航效果(仿蘑菇街)
  • jQuery实现简单的回到顶部totop功能示例

您可能感兴趣的文章:

  • js滚动条回到顶部的代码
  • js隐藏与显示回到顶部按钮及window.onscroll事件应用
  • 用原生js做个简单的滑动效果的回到顶部
  • 原生js实现淘宝首页点击按钮缓慢回到顶部效果
  • 原生JS实现平滑回到顶部组件
  • js+css实现回到顶部按钮(back to top)
  • JavaScript简单实现网页回到顶部功能
  • 实现变速回到顶部的JavaScript代码
  • JS采用绝对定位实现回到顶部效果完整实例
  • JS实现带动画的回到顶部效果

本文由美高梅网址发布于关于美高梅,转载请注明出处:页面回到顶部的三种实现,jQuery回到顶部的代码

上一篇:改变CSS样式基础代码,方法动态修改CSS属性 下一篇:javascript实现字符串反转的方法,一个JavaScript递归
猜你喜欢
热门排行
精彩图文