轩枫阁

首页 / Web前端 / 授人以渔 / JQuery / jQuery制作go to top按钮

jQuery制作go to top按钮

每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人了,但自己就是做不出这样的效果。后来在google和baidu搜寻了一下,仔细思考,并不像当初想象的那么复杂。经过整理贴到blog中与大家一起分享一下。

我们先来看看效果图吧:

gototop1

这个效果是“点我加到页面顶部”按钮在页面底部,当然还有一种效果就是这个按钮在页面中间,我就不在示例了。这也是最简单的效果,还有一种效果就是页面一开始不显示这个按钮,当滚动条向下移动时,到一定的距离才显示(也就是垂直滚动条距顶部有一定的距离时这个按钮才显示)。

我总结了几种方法,现在从简单到复杂依次看看几种实现效果的方法:

DEMO一

这种效果是最原始的,也是最简单的。当页载入时,这个按钮就存在,并固定在页面的底部,页面垂直滚动条离顶部有一定的距离时,点击“点我回到页面顶部”按钮时,页面就会回到顶部。那就一起看看其实现过程吧:

HTML 代码

 

为了更好测试效果,所以我们在这里多加了几个div,其实我们观注只是其中的一个”<div id=”goToTop”><a href=”#”></a></div>”这个div,因为我们需要实现的效果都是在这个div中实现的,当然还可以只在其里面的a链接标签元素中实现,为了更好看测试效果,我们给上面标签元素加上一定的样式:

CSS Code

 

现在HTML和CSS都有了,只剩下给这个按钮加上jQuery的效果了。

首先在<head></head>中加上jQuery的库:

(注:后面的例子都需要这个库,所以后面没有特殊说明的情况下,这个库都在head标签中存在。)

 

JS Code

现在我们就给其加上一定的jQuery代码

 

现在大家就可以去看看效果了,是不是很爽呀,不过这里说明一下,因为没有做IE6的bug处理,所以在IE下显示是不正常的,其他浏览器均测试通过,如查需要copy使用的情况下,除IE6下都可以放心正常使用。

 

DEMO二

Demo二这种方法实现的更理性化,也更完美化:也就是说一开始我这个按钮是隐藏的,只有我们的垂直滚动条距顶部有一定的距离后,这个按钮才会淡出显示,当回到顶滚动条回到顶部时,此按钮就又会淡淡的隐藏。怎么样是不是更完美了,更靓了。如果你喜欢,我们就一起看看其实现过程吧:

HTML代码和CSS的代码都是一样的,为了节省大家的时间我就不在列出来了,如果需要可以参考demo一的代码,我们主要就是看看jQuery代码的变化:

试试吧,我想你会更喜欢这种效果,同时也会更有成就感。(注:这个Demo在IE6下CSS需做一定的处理,才能正常显示)

 

DEMO三

DEMO三比前面两个DEMO都稍微更复杂一点,不过你理解了前面两个DEMO的话,我想你对这个Demo也不会感觉复杂,首先我们先看看各位代码的变化吧。

HTML代码

跟前面的代码相比较,我们可以明显的看出,这个DEMO少了一个div:

大家一定会感觉很奇怪,没了这个按钮,怎么点击回到顶部呢?想得也是没有错,我一开始也是这么想的,但后来看完整个DEMO后才恍然大悟,所以大家先别急,接着往下看。

CSS 代码

 

其他样式代码都是一样的,这里只是对goToTop的div稍作修改了一下。虽然我们在HTML中暂时不存在这样的一个div,但我们后面还是用得上的,所以先把样式在这里修改好加上去。完成这两步了,又到了实现效果的关键一步:

jQuery代码

 

这个DEMO是不是更合理的呀。这里有一点需要再次解释一下:最开始我们在HTML并没有加上goToTop的元素,怎么就有了呢?主要是我们通过jQuery加载了这个按钮的html标签,大家只要留意一下,我们加载页面后,通过firebug就可以看到这个按钮的标签也同时加载进来了:

gototop2

这下大家清楚了吧,不清楚的可以试试。动手了就一切都明白了。(注:这个demo经过测试在各浏览器下都能正常运行)

 

 

DEMO四

现在我们要看的这个Demo是通过配合jQuery的插件来实现回到页面顶部的效果,我们一起来看看其实现的过程。其中HTML 和CSS和我们一开始说的Demo一的是一样的,我们现在主要看其插件如何写,接着是如何调用写好的插件。

jQuery代码

 

这样我们就完成了怎么使用插件来制作go to top的按钮了。(注:IE6中css存在bug,其他浏览器测试完全通过)。

 

 

DEMO五

这个demo也是通过插件的方式实现的,但们跟demo4还是有一定区别,首先我们看HTML和CSS代码:

HTML代码

 

CSS代码

 

其主要的还是看jQuery的实现过程:

JSCode

大家可以对比一下,demo四和demo五的两种插件写法的相同与不同之处。

 

 

DEMO六

这个Demo是我们今天要说的最后一个效果了,这个效果跟前面的每一个demo都有一点不同,主要有以下几个不同点:第一,我们是通过jQuery给页面加载了一个顶点的锚点和一个回到顶部的按钮,第二点,我们是通过点击按钮后回到了页面的起始锚点,所以这里需要注意一点,这个锚点必须放在页面的最顶端,第三点,我们点击了按钮后,按钮会回到锚点位置,同时按钮也会慢慢的隐藏起来。接着我们就来看看吧

HTML代码

 

当页面加入下面的jQuery代码后,我们的HTML代码就会自动加载一个锚点和一个按钮的元素标签,看看Firebug中的截图:

gototop3

CSS代码

 

又来到jQuery这一关键一步了,大家可以仔细看看下面的代码:

JS Code

 

如果跟着做了的朋友,回到浏览器下就能看看效果了。(注:IE6下没有做兼容处理)。

到这我们就一起看完用六种不同方法制作”点我回到页面顶部”按钮。浪费大家不少时间,感兴趣的朋友可以动手体验一下,如果有更好的处理方法,可以分享一下,大家也可以一起互相学习的探讨一下。

转载自:W3CPLUS

本文标题:jQuery制作go to top按钮 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
413/470
415/470

相关阅读

文章评论

  • 不错的介绍,也不知道自己适合哪种?

    • 做个简单的适合自己的就好啦

      • 做好了,可以来看看效果如何,还是要感谢你的分享。

  • 6个demo,大集合哦~

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子