插件 jQuery.AnimateScroll 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.AnimateScroll 中文API文档 https://github.com/ramswaroop/animatescroll.js AnimateScroll

A Simple jQuery Plugin for Animating the Scroll

Demo can be seen at http://plugins.compzets.com/animatescroll

What is it exactly?

AnimateScroll is a jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the id or classname of the element where you want to scroll to.

It gives power to the user with its various options to customize the style of scrolling, scroll speed and many more. Supports more than 30 unique Scrolling Styles.

Usage

You need two things for this plugin to work, one is “jQuery library” and the other animatescroll.js file.

Just include the animatescroll.js file after the “jQuery library” as shown in the code snippet below and you’re done.

NOTE: The only dependency for this plugin to work is jQuery library.

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="animatescroll.js">
    </head>
    <body>
        <div id="section-1">This is the element where you want to scroll to<div>
        
        /*
         * You may call the function like this
         * (but better attach an event listener)
         */
        <a onclick="$('[jquery selector]').animatescroll([options]);">Go to Element</a>
    </body>
</html>

You can either download the files or install from Bower (package manager):

bower install animatescroll

NOTE: There are two js files, if you do not want the various easing effects, you can use the animatescroll.noeasing.js

Options

AnimateScroll has 6 options:

  1. easing
  2. scrollSpeed
  3. padding
  4. element
  5. onScrollStart
  6. onScrollEnd

easing (default: easing)

This option defines the scrolling style. The various easing effects supported can be seen at www.easings.net (Accepts string only)

scrollSpeed (default: 400)

Controls the scrolling speed, higher is the number slower is the scroll speed (Accepts only number)

padding (default: 0)

Adjusts little ups and downs in scrolling. Suppose a small amount of padding is applied to a particular element due to which the scroll didn’t end at the right position, so this option helps you to rectify (Accepts numbers only, can be negative)

element (default: html, body)

Added in v1.0.5. The element in which you want this plugin to work. Default is “body”. (Accepts any jQuery/CSS selector)

onScrollStart

Added in v1.0.7. A function to be called before scrolling starts

onScrollEnd

Added in v1.0.7. A function to be called after the scrolling ends completely with animations

To add an option:

$('[jquery selector]').animatescroll({
  <optionName> : <optionValue>
});

Easing Effects

This plugin supports more than 30 different styles of scrolling. The easing option lets you choose a particular style of scrolling according to your choice.

The different easing effects are:

swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart,
easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine,
easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic,
easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce

About

My name is Ram Patra. I am an app developer and a tech aficionado from India. I make apps/plugins for mobile, web, and computer. Have a look at some of them at rampatra.com.

This is my first jQuery Plugin and I hope you all like it. You are free to make more improvements to the code by sending a pull-request.

If my plugin helped you or unlikely for any issues tweet me @ram__patra, will be happy to hear from you.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Proudly sponsored by BrowserStack. Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了