一、HTML(基本结构)
2 |
< p id = "back-to-top" >< a href = "#top" >< span ></ span >返回顶部</ a ></ p >
|
有了上面的html后,当我们点击”返回顶部”这个链接时,就会自动跳转到body标签的位置,也就是页面的顶部。
二、CSS(样式化)
之所以在上面html代码的<a>标签中添加一个空的<span>标签,目的是为了创建我们预想的返回顶部链接样式,如下图:
接下来我们需要使用position : fixed;属性将跳转链接固定到页面上,这样它就可以随时停留在视线范围内。以下是全部CSS代码:
15 |
-moz-transition:color 1 s;
|
16 |
-webkit-transition:color 1 s;
|
17 |
-o-transition:color 1 s;
|
19 |
p #bac k-to- top a:hover{
|
23 |
background : #d1d1d1 url (images/arrow-up.png) no-repeat center center ;
|
32 |
-moz-transition:background 1 s;
|
33 |
-webkit-transition:background 1 s;
|
34 |
-o-transition:background 1 s;
|
36 |
#bac k-to- top a:hover span{
|
37 |
background : #979797 url (images/arrow-up.png) no-repeat center center ;
|
三、jQuery(动态效果)
使用jQuery要实现的效果是:当页面初次载入,浏览器滚动条处于最顶部的时候,跳转链接处于隐藏状态。当滚动条向下滚动后,跳转链接逐渐显出,当点击跳转链接后,页面逐渐滚动至顶部,跳转链接逐渐消失。以下是jQuery代码:
02 |
<script type= "text/javascript" >
|
03 |
$(document).ready( function (){
|
07 |
$( "#back-to-top" ).hide();
|
12 |
$(window).scroll( function (){
|
13 |
if ($(window).scrollTop()>100){
|
14 |
$( "#back-to-top" ).fadeIn(1500);
|
18 |
$( "#back-to-top" ).fadeOut(1500);
|
24 |
$( "#back-to-top" ).click( function (){
|
25 |
$( 'body,html' ).animate({scrollTop:0},1000);
|
四、兼容性
这里我们给body标签添加了id=”#top”,目的是当浏览器不支持javascript的时候,也可实现返回顶部的效果。实际上jQuery可以让滚动条定位于任何位置,所以这里我们保留了对浏览器的兼容性。
本文地址:http://startwmlife.com/using-jquery-to-create-humane-back-to-top-links/
分享到:
相关推荐
找结果,使用jQuery创建人性化的返回顶部链接. 之前写过关于创建人性化的返回顶部链接的文章,讨论了返回顶部链接需要具备哪些特点才能称得上人性化
jQuery右端悬浮带返回顶部代码
jQuery实现一个动画版缓动返回顶部和底部的效果,里面附有demo,可以根据需求直接修改
jQuery带微信的返回顶部
当页面滚动时(监听scroll事件),浏览器滚动条处于最顶部时,隐藏“返回顶部”按钮,当滚动条继续向下滚动时,动态计算出当前可视窗口的...在这个过程中,我们可以使用animate来创建动画效果,即返回顶部时有个过渡效果
jquery返回顶部隐藏按钮
jQuery实现返回顶部
jquery返回顶部代码,底部小火箭样式,点击返回顶部
代码简介:jQuery平滑返回顶部代码是一款实用的带二维码jQuery返回顶部代码。
当网页内容过多,导致页面过长时可以方便返回顶部
jQuery插件页面滚动返回顶部按钮 jQuery插件页面滚动返回顶部按钮
jQuery可变透明度返回顶部代码
效果比较好的jQuery返回顶部代码
jQuery带底部返回顶部按钮代码是一款带有微信二维码的底部固定层返回顶部代码。
jquery.returnTop返回顶部Jquery插件
JQUERY返回顶部功能带微信二维码和新闻提示 JQUERY返回顶部功能带微信二维码和新闻提示
jquery 控制返回顶部
实现效果: jQuery右端悬浮带返回顶部代码,这样的悬浮效果也还是不错的,可以在上面加上在线客服等,当一直预览网页时,点击返回顶部,也还是不错的效果,php中文网推荐下载!
jQuery冲天火箭返回顶部动画特效是一款支持自定义速度的网站右下角返回顶部代码。
jQuery可变透明度返回顶部代码 第二屏才会显示top 且透明度会越老越低