`

jQuery的“回到顶端”插件 - ScrollUp

阅读更多

日期:2013-4-17  来源:GBin1.com

 

jQuery的“回到顶端”插件 - ScrollUp

 

在线演示

Scrollup是一款jQuery的“回到页面顶端”的插件,能够帮助你快速的实现一个完全自定义的“back to top"的功能。

主要参数:

  • scrollName: 'scrollUp', // Element ID

  • topDistance: '300', // Distance from top before showing element (px) 

  • topSpeed: 300, // Speed back to top (ms)

  • animation: 'fade', // Fade, slide, none

  • animationInSpeed: 200, // Animation in speed (ms)

  • animationOutSpeed: 200, // Animation out speed (ms)

  • scrollText: 'Scroll to top', // Text for element 

  • activeOverlay: false, // 这个属性对于开发者来说可能比较有用,帮助你定位“回到顶端”按钮出现时滚动到的页面位置。

使用代码

$(function () {
    $.scrollUp({
        scrollName: 'scrollUp', // Element ID
        topDistance: '300', // Distance from top before showing element (px)
        topSpeed: 300, // Speed back to top (ms)
        animation: 'fade', // Fade, slide, none
        animationInSpeed: 200, // Animation in speed (ms)
     ......

网站地址:http://markgoodyear.com/2013/01/scrollup-jquery-plugin/

来源:jQuery的“回到顶端”插件 - ScrollUp

分享到:
评论

相关推荐

    回到顶端插件ScrollUp.zip

    【回到顶端插件ScrollUp.zip】是一个用于网页的JavaScript插件,主要功能是提供一个便捷的方式,让访客可以快速地将浏览窗口滚动回页面顶部。这个插件基于广泛使用的JavaScript库jQuery构建,使得实现“回到顶部”...

    前端项目-scrollup.zip

    在 "scrollup-master" 这个压缩包中,通常会包含以下内容: - `scrollup.js` 或 `scrollup.min.js`:这是 ScrollUp 插件的主要 JavaScript 文件,包含了插件的所有功能。 - `demo` 文件夹:可能包含演示如何使用...

    jQuery-scrollUp.js:回到顶部插件

    scrollUp 就是这样一款插件,它能够让用户滚动条滚动到一定的位置时(可设置),右下角出现“滚动到顶部”的按钮,点击后,页面就是慢慢的滚动到顶部,而不是硬生生的直接回到顶部,提高了用户体验。使用方法引入...

    回到顶端插件ScrollUp特效代码

    "回到顶端插件ScrollUp特效代码"就是专为此目的设计的工具,它利用JavaScript库jQuery来实现,使得用户只需点击一个按钮,就能轻松地将页面滚动回顶部,避免了长篇幅内容浏览时的不便。 ScrollUp插件的核心在于它的...

    scrollUp - jQuery滚动到顶部插件演示

    scrollUp 就是这样一款插件,它能够让用户滚动条滚动到一定的位置时(可设置),右下角出现“滚动到顶部”的按钮,点击后,页面就是慢慢的滚动到顶部,而不是硬生生的直接回到顶部,提高了用户体验。 scrollUp 还...

    scrollup-master

    在本例中,压缩包`scrollup-master`中应包含插件的相关文件。通常,你需要将`jquery.scrollup.js`和样式文件(如`scrollup.css`)放入你的项目目录,并在页面的`<head>`标签内引用它们。 ```html ...

    scrollup 页面返回顶部插件

    文件名"scrollup-master"通常代表这是开源项目的主分支或者源码仓库,"master"通常是Git仓库的默认分支,表示最稳定、最新的代码版本。在这个目录下,我们可能找到包括以下文件和文件夹: - `index.html`:示例页面...

    jQuery插件

    许多插件,如`jQuery.scrollUp`,提供了滚动到页面顶部的动画效果。 - **表单处理**:`jQuery.validate`是一个强大的表单验证插件,可以轻松设置规则并显示错误消息。此外,还有`jQuery.uniform`,用于美化HTML元素...

    50个开发者最喜欢使用的jQuery插件

    **jQuery 插件详解** jQuery 是一款高效、简洁且易用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。由于其强大的功能和丰富的生态系统,jQuery 插件应运而生,为开发者提供了无数...

    react-scroll-up-button:用于固定滚动到顶部按钮的React Component

    React向上滚动按钮React Component固定滚动到顶部按钮。 该按钮可以使用默认按钮,也可以自定义为您想要的任何按钮。 该组件包含所有必要的代码,可利用缓动效果滚动到页面顶部(或所需位置)。...

    jquery滚动

    例如,`jQuery.scrollTo` 和 `jQuery.scrollUp` 是两个常用的滚动插件。`jQuery.scrollTo` 允许你平滑地滚动到页面上的某个特定位置,而 `jQuery.scrollUp` 提供了一个向上滚动到页面顶部的便捷方法。这两个插件的...

    scrollup:转到页面顶部的简单插件

    向上滑动转到页面顶部的简单插件用法$ npm install 上卷使用默认选项创建新元素: new ScrollUp()或者var el = document.querySelector('.myelem')new ScrollUp(el,{//options})#选项选项默认描述scrollDistance ...

    jquery向上循环滚动特效.zip

    在这个文件中,开发者可能定义了一个jQuery插件,通过`.scrollUp()`这样的方法调用来应用到指定的HTML元素上。 2. **示例HTML文件**:可能包含一个简单的HTML文件,用于演示如何在实际网页中使用这个插件。这个文件...

    前端项目-jquery.cycle.zip

    在"前端项目-jquery.cycle.zip"压缩包中,包含的"cycle-master"文件夹很可能是该插件的源代码和相关资源。 ### 1. jQuery Cycle的基本原理 Cycle插件的核心在于它可以动态地改变HTML元素的显示状态,通常这些元素...

    scrollup滚动

    scrollUp 就是这样一款插件,它能够让用户滚动条滚动到一定的位置时(可设置),右下角出现“滚动到顶部”的按钮,点击后,页面就是慢慢的滚动到顶部,而不是硬生生的直接回到顶部,提高了用户体验。

    jquery滚动图片效果

    综上所述,"jQuery滚动图片效果"结合了jQuery库和Cycle插件的优势,通过简单的代码实现了丰富的图片展示效果。同时,CSS的运用使得视觉效果更加美观,符合网页设计的需求。开发者可以根据具体需求调整参数和样式,...

    jQuery,图片走马灯,向上滚动

    在实现图片走马灯效果时,jQuery的优势在于其简洁的API和丰富的插件支持。 首先,我们需要在页面中引入jQuery库。这通常通过在HTML文件的`<head>`标签内添加如下代码来完成: ```html <script src="https://code....

    jQuery 大幅文字+图片滚动变幻的动画布局示例

    在这个示例中,`#yourElement`是你要动画化的元素ID,`originalHeight`存储了元素原始的高度,`scrollUp`函数则定义了动画逻辑:元素先向上移动其自身高度的距离,然后在动画结束时立即回到原位,形成循环滚动的效果...

    scrollUp!-crx插件

    插件在浏览器的地址栏附近添加了一个小箭头图标,用户只需轻轻一点,就能瞬间回到页面的顶部,极大地提高了浏览体验。这个设计对那些因为种种原因无法或不喜欢使用键盘的用户来说尤其实用。例如,一些用户可能由于...

Global site tag (gtag.js) - Google Analytics