npm.io
2.0.4 • Published 9 years ago

jquery.smooth.scroll

Licence
MIT
Version
2.0.4
Deps
2
Vulns
3
Weekly
0
SummaryDependencyVersions

jQuery Smooth Scroll Plugin

Demo

[demo 1] (https://htmlpreview.github.io/?https://github.com/pgalias/smoothScroll/blob/master/demo1.html) [demo 2] (https://htmlpreview.github.io/?https://github.com/pgalias/smoothScroll/blob/master/demo2.html)

Description

Smoothly scrolling to the top of div on mouse wheel, swipe and arrow keys.

Features
  • Typescript assets
  • Swipe event
  • Keyboard arrow keys event
  • Possibility of using with scrollable div
Requirements
Installing

Available options for installing plugin

  • Clone repo git clone https://github.com/pgalias/smoothscroll
  • Bower bower install jquery.smooth.scroll
  • NPM npm install jquery.smooth.scroll
Usage

  1. Add dependencies to html file 

    <!-- jQuery -->
<script src="src/to/jquery.js"></script>
<!-- optional -->
<script src="src/to/jquery.event.move.js"></script>
<script src="src/to/jquery.event.swipe.js"></script>
<!-- plugin -->
<script src="src/to/smoothScroll.js"></script>

  2. Use below code in your script file

    $('selector').smoothScroll([options])

  3. optional: You can also put overflow: hidden style for this selector if you do not want to allow user to scrolling by scrollbar.

Options

Available settings

Attribute Type Default Description
parent String html,body Reference (class, id, etc) to parent the scroll should be done on
speed Number / String slow Time of scrolling in ms (number) or slow/fast (string)
swipe Boolean true Allow swipe events
keyboard Boolean true Allow keyboard arrow keys scrolling

Changelog

  • v2.0.1
    • some fix
  • v2.0.0
    • changed js to ts
    • added swipe event
    • added possibility to smoothly scrolling inside scrollable div
  • v1.0.0
    • initial release

TODO

  • Prevent MS Edge to firing mousewheel event two times
  • Handler for touchpad
  • Horizontal scrolling

Keywords

javascripttypescriptjqueryscroll