一个非常超级可爱的滚动到顶端(Back to top)的jQuery插件- jQuery Back to Top

最新推荐文章于 2021-02-28 10:45:50 发布
最新推荐文章于 2021-02-28 10:45:50 发布
阅读量1k 收藏
点赞数
分类专栏： gbin1 jquery 文章标签： jquery插件 jquery firefox chrome ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjfat/article/details/6984864
版权
jquery 同时被 2 个专栏收录
233 篇文章 0 订阅
订阅专栏
gbin1
92 篇文章 0 订阅
订阅专栏

日期：2011/11/17  来源：GBin1.com

今天介绍一个非常可爱漂亮的滚动到顶端的插件,无需设置。它能快速的将页面里的元素添加滚动到顶端的功能。而且只在滚动时才出现，当滚动到顶端自动消失。

一个非常超级可爱的滚动到顶端(Back to top)的jQuery插件- jQuery Back to Top

在线演示  在线下载

支持：Firefox, Chrome and IE7+

Javascript

<script type="text/javascript" src="js/jquery.backtotop.js"></script>
<script type="text/javascript">
    $("#back-to-top").backToTop();
</script>

原文来源：一个非常超级可爱的滚动到顶端(Back to top)的jQuery插件- jQuery Back to Top


thegeek
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery-check-id-and-call-back-.rar_back
09-23
在给定的标题"Jquery-check-id-and-call-back-.rar_back"和描述"Jquery check id and call back"中，我们可以推断这个压缩包可能包含了关于如何在jQuery中检查元素ID是否存在以及如何使用回调函数的教程或示例。...
jQuery返回顶部插件
ICode联盟
12-20 275
下载地址 一款超级简洁实用的jQuery返回顶部插件。该返回顶部插件在页面滚动到一定高度时自动出现，用户点击它后会以平滑的方式滚动到页面顶部。返回顶部按钮能够帮助用户快速平滑的返回到页面的顶部。HTML结构在body标签结束之前添加返回顶部按钮： Top CSS样式返回顶部按钮始终出现在页面的右边。初始化时它是不可见的：visibility:hidden; 和 opacity:0;。这两个属性可以通过2个class来控制：.cd-is-visible 和.cd-fade-out。.cd-top.cd-i
利用jquery简单实现返回顶部功能
zhanqixuan22的博客
05-31 246
首先大家看下效果图， 点击之后就可以回到页面顶部啦。实现很简单，主要是一段CSS和Js： 1.CSS代码如下，为了能在你的每个页面都能有效，请把代码用在一个公共的地方，例如ftl的宏。大家酌情而定吧。 .backToTop { display: none; width: 18px; line-height: 1.2;
jQuery实现返回顶部功能
itmyhome的专栏
05-13 7463
jQuery实现返回顶部功能 整理两个实现功能，一个是右下角的返回顶部，一个是右侧的返回顶部，分别如图 第一种实现 一、JSP或HTML(主体结构) 在body中添加 <body id="top"> <p id="back-to-top"><a href="#top"><span></span></a></p> </body>
jquery back to top 页面底部的返回顶部按钮
weixin_33726318的博客
08-23 143
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Back to top&lt;/title&gt; &lt;script type="text/javascript&q
Typecho-BackToTop:简单 轻量级typecho返回顶部插件
05-10
BackToTop简单轻量级随机三款东方样式,刷新页面改变【食用方法】Download ZIP, 解压重命名文件夹为BackToTop上传至usr/plugins目录登录后台启用即可如果主题模板已加载jquery，可以在插件设置内禁用加载jquery【更新...
stepy：jQuery Stepy-向导插件
02-04
jQuery Stepy是一个可生成可自定义向导的插件。 选件 back: undefined // Callback before the backward action. block: false // Block the next step if the current is invalid. description: false // Choose ...
jquery滚动到顶部底部代码
10-24
在网页设计中，提供一个简单易用的滚动到顶部或底部的控制功能是提升用户体验的重要方式之一。jQuery库因其简洁的API和丰富的功能，成为实现此类功能的理想选择。本篇文章将详细讲解如何使用jQuery实现滚动到顶部和...
JS-BACK-TOP.rar_back
09-19
在网页设计中，提供一个“返回顶部”的功能是非常常见的需求，尤其在长页面滚动时，用户可以方便地点击按钮快速回到页面的起始位置。在本案例中，我们讨论的是如何利用JavaScript，特别是jQuery库来实现这样的功能。...
可爱的卡通人物动画返回顶部代码
06-01
jquery配合seajs框架实现可爱的卡通人物动画返回顶部特效
jQuery返回顶部插件-toTop
熊宗的博客
10-31 2411
简介 jQuery.toTop 是一款轻量级的 jQuery 返回顶部插件，压缩后不到 1KB。同时它也是可定制的，你可以设置是否自动隐藏、滚动时间、位置等等。 在线演示及下载 在线演示 本地下载 使用方法 引入文件 script src="jsjquery.min.js">script> script src="
《JQuery基础教程》第四版课后练习代码--第五章
qq_22655689的博客
08-26 1578
1、修改添加back to top链接的代码，以便这些链接只从第四段后面才开始出现 $(document).ready(function(){ var $p=$('div.chapter p').eq(2).nextAll(); $('back to top').insertAfter($p); $('').prependTo('body'); }) 2、在单击ba
JQuery实现返回顶部
Marco_30的博客
02-28 324
<!DOCTYPE html> <html lang="en"> <head> <style> #back-to-top{ position:fixed;display:none; bottom:100px; right:80px;} #back-to-top a{ text-align:center; text-decoration:none; color:red; display:block; width:64px;} #back-to-
jquery-回到顶部（backtop）
node的专栏
11-29 1478
backtop       17zuoye.com         17zuoye.com         回到顶部   $(document).ready(function(){     $(window).scroll(function(){         if($(this).scrollTop()!=0){
学习笔记：《jQuery基础教程》第四版第五章课后练习——操作DOM
illuSioN4ng↖(^ω^)↗
11-26 2299
修改添加back top链接的代码，以便这些链接只从第四段后面才开始出现。 在单击back to top链接时，为每个链接后面添加一个新段落，其中包含You were here字样。确保链接仍然有效。 在单击作者名字时，把文本改为粗体(通过添加一个标签，而不是操作类或css属性)。 挑战:在随后单击粗体作者名字时，删除之前添加的元素(也就是在粗体文本与正常文本之间切换)。 挑战：为正文中的每一个段
BackToTop.js 为你的网站添加“回到顶部”按钮
11-08 2876
图片来源：Inspiring Wallpapers 就像上图中的超人一样，你的读者也想要一飞冲天的感觉。 没错，你的网站需要一个 “回到顶部” 的按钮。 每当你的文章写得很长，或者评论盖了好几十层楼的时候，用户想要回到顶部就成了一件折磨的事情，鼠标滚轮滚得要烧起来有木有？即便是直接拖动滚动条，多少还是有点不痛快。正因如此，有时你觉得碍手碍脚的一个小按钮，此时却显得那么贴心。 我知道对很
Jquery悬浮backTop代码
andy20160821的博客
05-14 162
1 $(window).scroll(function () { 2 if ($(this).scrollTop() != 0) { 3 $("#toTop").fadeIn(); 4 } else { 5 $("#toTop").fadeOut(); ...
gogogo!操作DOM的练习
weixin_34148340的博客
06-03 159
1、修改添加back to top的链接代码，一遍这些链接只从第四段后面才开始出现。 2、在单击back to top链接时，为每个链接后面添加一个新段落，其中包含（you were here）字样。确保链接仍然有效。 3、在单击作者名字的时，把文本修改为粗体（通过添加一个标签，而不是操作类或者css）。 4、在随后单击粗体作者名字时，删除之前添加的<b>元素，（也就是在粗体文本...
用jQuery设置一个悬浮图片按钮，点击使页面滑到最顶端
最新发布
05-25
<img src="your-image-url" alt="Back to top"> ``` CSS: ```css .floating-btn { position: fixed; bottom: 20px; right: 20px; cursor: pointer; z-index: 9999; } ``` jQuery: ```javascript $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值