`
jjfat
  • 浏览: 289318 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

日期：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

分享到：
| 15个值得开发人员关注的jQuery开发技巧和心 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 滑动到页面顶端效果

    在网页开发中，jQuery 是一个非常流行的 JavaScript 库，它提供了丰富的功能来简化 DOM 操作、事件处理和动画效果。本篇文章将详细讲解如何利用 jQuery 实现“滑动到页面顶端”的效果，这是一种常见的用户体验优化...

    jquery-flip翻转插件有demo

    在本文中，我们将深入探讨jQuery-flip插件，这是一个用于创建动态翻转效果的强大工具，尤其适用于网页设计和开发。该插件使开发者能够轻松实现3D翻转效果，为用户界面增添互动性和视觉吸引力。 首先，jQuery-flip...

    jQuery下的返回顶部功能的实现实例页面

    同时，我们注意到还有一个`backtoTop.css`文件，这是用于样式化的CSS文件。在CSS中，我们可以定义返回顶部按钮的样式，例如颜色、大小、位置等。以下是一个基本的样式示例： ```css #backtoTop { position: fixed;...

    jQuery插件页面滚动返回顶部按钮

    在网页设计中，用户体验是一个非常重要的考虑因素，而“返回顶部”按钮则是一个常见的优化手段，尤其是在内容丰富的页面上。jQuery作为一个广泛使用的JavaScript库，提供了许多便利的功能来增强页面交互，其中包括...

    Learning jQuery 3 - Fifth Edition

    Also, we'll learn how to integrate jQuery with your favourite back-end framework. Moving on, we'll learn how the ECMAScript 6 features affect your web development process with jQuery. we'll discover...

    JS-BACK-TOP.rar_back

    在网页设计中，提供一个“返回顶部”的功能是非常常见的需求，尤其在长页面滚动时，用户可以方便地点击按钮快速回到页面的起始位置。在本案例中，我们讨论的是如何利用JavaScript，特别是jQuery库来实现这样的功能。...

    jquery-easyui-1.3.4.zip 修正版

    从官网下载的 jquery-easyui-1.3.4 ，如果单独运行demo中的html，效果可以出来，但是如果将 jquery-easyui-1.3.4添加到vs(我的版本是vs2012)...带back的是原版本，另外一个是修正后的版本，感谢城都-小江的帮助，感谢。

    jquery回到顶部插件jquery.goup.js

    &lt;a href="#" id="back-to-top"&gt;返回顶部 ``` 3. JavaScript初始化：在文档加载完成后，使用jQuery选择器找到返回顶部按钮，并调用插件： ```javascript $(document).ready(function() { $('#back-to-top').goup();...

    Jquery-check-id-and-call-back-.rar_back

    在给定的标题"Jquery-check-id-and-call-back-.rar_back"和描述"Jquery check id and call back"中，我们可以推断这个压缩包可能包含了关于如何在jQuery中检查元素ID是否存在以及如何使用回调函数的教程或示例。...

    快速返回顶部jquery插件.zip

    【快速返回顶部jQuery插件】是一种常见的网页交互功能，它允许用户通过点击一个按钮或执行某种操作快速回到页面顶部，提高用户体验。这个压缩包包含了实现这一功能的必要资源，包括HTML、图片和JavaScript文件。 ...

    jQuery实现返回顶部

    &lt;a id="back-to-top" href="#"&gt;返回顶部 ``` 这里的`#`是空链接，用于防止页面跳转。`id`属性用于后续的jQuery选择器。 2. **CSS样式设置** 为了美观和用户体验，可以为返回顶部按钮添加一些CSS样式，如透明度...

    京东下雪jquery插件

    【标题】"京东下雪jquery插件"是一个用于网页中创建雪花飘落视觉效果的JavaScript库，基于流行的jQuery框架。这个插件旨在为网站添加节日氛围或者特定活动的装饰元素，比如在冬季促销或者特定庆祝活动中，模拟下雪...

    jquery 返回顶部的悬浮插件

    &lt;a id="back-to-top" href="#" title="返回顶部"&gt;顶部 ``` **3. CSS样式** `css`文件夹中的样式表定义了按钮的样式，包括颜色、大小、位置等。比如，可以设置按钮在页面底部固定，鼠标悬停时的过渡效果等。这里的...

    jquery 返回顶端组件

    var $backToTop = $('#back-to-top'); $(window).scroll(function() { if ($(this).scrollTop() &gt; 100) { // 当页面滚动超过100像素时显示按钮 $backToTop.fadeIn(); } else { $backToTop.fadeOut(); } });...

    jquery回顶部可控制速度

    1. jQuery的DOM选择器，如`$('#back-to-top')`用于选取ID为`back-to-top`的元素。 2. `scrollTop()`函数的使用，获取或设置滚动位置。 3. `on()`函数绑定滚动和点击事件。 4. `fadeIn()`和`fadeOut()`用于元素的显示...

    js+css实现回到顶部按钮（back to top）.docx

    首先，我们需要在HTML中添加一个id为"back-to-top"的p元素，并在其中添加一个a标签，href属性设置为"#top"，表示回到页面的顶部。 在CSS中，我们需要设置p#back-to-top的样式，使其固定在页面的右下角，并设置a标签...

    scrollToTop - a jQuery plugin

    One click to scroll back to the top of the webpage. http://geniuscarrier.com/scrolltotop-a-jquery-plugin/

    jquery返回顶部插件

    这里假设有一个ID为`back-to-top`的元素（可能是`&lt;a&gt;`或`&lt;button&gt;`标签），作为返回顶部的触发器。 4. **自定义样式和交互**：根据设计需求，可以通过CSS调整返回顶部按钮的样式，如大小、颜色、位置等。同时，...

    jquery返回到网页顶部

    `$('#back-to-top').click()` 事件监听按钮的点击，使用 `animate()` 方法平滑地将页面滚动到顶部，`scrollTop: 0` 表示滚动到页面顶部，`800` 是动画持续的时间，单位为毫秒。 在提供的压缩包中，`仿淘宝回到顶部...

Magicbox
Global site tag (gtag.js) - Google Analytics