jquery.smoothPageScroll

Performs a smooth page scroll to an anchor on the same page.

Description

1. Put a hash after you scroll smoothly.
2. Anchor of specifying the coordinates.
3. It is possible to scroll smoothly at load time.
4. Function is executed after the movement.
5. When you scroll with the mouse in the middle that are scrolling, avoided by stopping the scroll the problem of jumpy.
6. Scrolling stops when you click on the screen between the scroll.

Demo

DEMO

Requirement

• jquery
• jquery.easing

Because you are using a easeOutQuart to the initial value of animate of easing at the time of the scroll, you must have this plug-in.

Install

Npm

npm install jquery.smooth-page-scroll 

Usage

<script src="js/jquery.js"></script> <script src="js/jquery.easing.js"></script> <script src="js/jquery.smoothPageScroll.js"></script> <script> $.smoothPageScrollByLoaded(); $('a[href^="#"]').smoothPageScroll(); </script> 

If you want to add an event other than 'a tag'.

$('h1').smoothPageScroll({ 	target: '#header' }); 

Function is executed after the movement.

$('a[href^="#"]').smoothPageScroll({ 	complate: function(e) { 		console.log(e); 	} }); 

Hash of specifying the coordinates.

#1000,1000 //（x, y） 

Scroll at any timing.

$.smoothPageScrollStart({ 	target: '#header' }); 

Options

Initial setting

$.smoothPageScrollByLoaded({     easing: 'easeOutQuart',     speed: 1000,     complate:'',     target: location.hash,     isAddHash: true,     isTopScroll: true,     isLeftScroll: true });  $('a[href^="#"]').smoothPageScroll({     easing: 'easeOutQuart',     speed: 1000,     delay: 0,     target: undefined,     complate: '',     isAddHash: true,     isTopScroll: true,     isLeftScroll: true });