https://github.com/dilane3/smoothscroll-js

A simple smooth scroll library for JavaScript.
https://github.com/dilane3/smoothscroll-js

Last synced: 7 days ago
JSON representation

A simple smooth scroll library for JavaScript.

• Host: GitHub
• URL: https://github.com/dilane3/smoothscroll-js
• Owner: dilane3
• Created: 2022-09-01T05:01:00.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2022-09-01T05:22:01.000Z (about 2 years ago)
• Last Synced: 2024-10-28T14:58:17.900Z (18 days ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Smoothscroll-js

  

A simple smooth scroll library for JavaScript. 

## Advantages

* Easy to use

* Lightweight

* Fast

* Cross-browser

* Customizable

## Installation

```bash

npm install @dilane3/smoothscroll-js

```

or 

```bash

yarn add @dilane3/smoothscroll-js

```

## Usage

Genarally, you can use the library like this.

```jsx

import SmoothScroll from '@dilane3/smoothscroll-js';

```

Then you can use it in your application:

```jsx

// Wrapper element for smooth scrolling

const wrapper = document.querySelector('.wrapper');

// Smooth scroll option

const options = {

  direction: 'v',

  smooth: 0.08

}

// Initialization

new SmoothScroll(wrapper, options);

```

**For React App**

Especialy for React App, you can use the library like this.

```jsx

import SmoothScroll from '@dilane3/smoothscroll-js';

```

Then you can use it in your application:

```jsx

// Create a component for smooth scrolling

const App = () => {

  const wrapper = useRef(null);

  useEffect(() => {

    const options = {

      direction: 'v',

      smooth: 0.08

    }

    new SmoothScroll(wrapper.current, options);

  } , []);

  return (

    


      


        
Hello World

        
This is a paragraph

      

    

  );

}


```

## Parameters

The constructor of SmoothScroll accepts the following parameters.

| Parameter | Type        | Description |

| --------- | ----------- | ----------- |

| wrapper   | HTMLElement | The wrapper element for smooth scrolling |

| options   | Object      | The options for smooth scrolling |

### Options parameters

| Parameter | Type            | Description |

| --------- | --------------- | ----------- |

| direction | 'v' or 'v-'      | The direction of smooth scrolling |

| smooth    | Number          | The smooth value of smooth scrolling |

## License

ISC License

Copyright (c) 2022 Dilane3