https://github.com/robbendebiene/sliding-scroll

Minimal pure JavaScript smooth scrolling function.
https://github.com/robbendebiene/sliding-scroll

javascript pure-javascript smooth-scrolling smoothscroll

Last synced: 2 months ago
JSON representation

Minimal pure JavaScript smooth scrolling function.

• Host: GitHub
• URL: https://github.com/robbendebiene/sliding-scroll
• Owner: Robbendebiene
• License: mit
• Created: 2016-08-05T12:25:11.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-05-03T18:14:56.000Z (over 2 years ago)
• Last Synced: 2024-10-12T05:43:54.141Z (3 months ago)
• Topics: javascript, pure-javascript, smooth-scrolling, smoothscroll
• Language: JavaScript
• Homepage:
• Size: 23.4 KB
• Stars: 22
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sliding-Scroll

## A minimal pure JavaScript smooth scrolling function.

Scroll smoothly over time to a given absolute scroll position defined by the top and left properties.


If the top or left scroll position is omitted it will fallback to the current scroll position.

**duration:** Scroll duration in milliseconds; defaults to 0 (no transition)


**element:** The html element that should be scrolled; defaults to the main scrolling element


**easingFunction:** Defines the scrolling rate over time; defaults to ease in and out sin.


You can either use one of the predefined functions from EASING_FUNCTIONS or a custom one.

### Smooth scroll to function

```javascript

function smoothScrollTo({

  top,

  left,

  duration = 0,

  element = document.scrollingElement,

  easingFunction = EASING_FUNCTIONS.slowInSlowOut

})

```

### Additional convenience functions

#### Scroll to the top of the main page

```javascript

smoothScrollToTop({

    duration = 0,

    easingFunction = EASING_FUNCTIONS.slowInSlowOut

})

```

#### Scroll to the bottom of the main page

```javascript

smoothScrollToBottom({

    duration = 0,

    easingFunction = EASING_FUNCTIONS.slowInSlowOut

})

```

#### Scroll to a specific element in the main page.

```javascript

smoothScrollToElement(element, {

  duration, easingFunction,

  offsetTop = 0,

  offsetLeft = 0

})

```

#### Scroll to an element with a specific id in the main page.

```javascript

smoothScrollToId(id, {

  duration, easingFunction,

  offsetTop = 0,

  offsetLeft = 0,

})

```