A simple smooth scrolling using 100% vanilla JavaScript.

Overview

SmoothScroll.js

A simple smooth scrolling using 100% vanilla JavaScript, and it's only 3kb!

> Demo

Usage

// index.html
<html>
  <head>
    <link rel="stylesheet" href="./css/SmoothScroll.css">
    <link rel="stylesheet" href="./css/content.css"> // Your content CSS file
  </head>
  <body>
    <div class="viewport">
      <div class="container">
        // Content
      </div>
    </div>
    <script src="./js/SmoothScroll.min.js"></script>
    <script src="./js/script.js"></script>
  </body>
</html>
You might also like...

SafeCycle—a tool that keeps cyclists safe. Gone are days of weaving through busy city streets, SafeCycle finds all the bike routes for you to ensure a smooth ride wherever you want to go.

Inspiration Biking—an everyday form of travel for students and professionals across the globe. On-campus, back home, and with the people that we know

May 2, 2022

A-Frame components for smooth locomotion and snap turning

A-Frame components for smooth locomotion and snap turning

A-Frame locomotion A collection of A-Frame components, systems and primitives that enable all sorts of locomotion in VR. It't built to be modular, fle

Sep 1, 2022

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

iSlider iSlider is a lightweight, high-performant, no library dependencies cross-platform slide controller. It can help handling most sliding effects,

Nov 25, 2022

Smooth subdivision surface modifier for use with three.js BufferGeometry.

Smooth subdivision surface modifier for use with three.js BufferGeometry.

Three Subdivide This modifier uses the Loop (Charles Loop, 1987) subdivision surface algorithm to smooth modern three.js BufferGeometry. — Live Demo —

Dec 3, 2022

A blazingly fast Bun.js filesystem router, with an unpleasantly smooth experience!

Oily A blazingly fast Bun.js filesystem router, with an unpleasantly smooth experience! Installation · Usage · Examples · Discord Installation Once yo

Dec 19, 2022

Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation.

Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation.

smooth-shadow Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation. Demo As Tobias already p

Oct 15, 2022

O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

Projeto HTML 100% Javascript Front-end feito "sem HTML" Conteúdos ➜ Sobre o projeto ➜ O que aprendi ➜ Como usar 🔎 Sobre o projeto Voltar ao topo O ob

Aug 3, 2021

⚡️ 100 Days of DS Algo for interview preparation (C++ and Javascript)

100 days of Problem Solving for Tech Interviews ⚡️ For the next 100 Days, I'l code at least one problem everyday in Javascript (and maybe C++?). Might

Aug 5, 2022

Um bot de suporte feito usando threads para o Discord, 100% customizável, feito em JavaScript e inspirado no Rio Helper do servidor Elixir Lab e na Loritta Helper do serivdor de suporte da Loritta.

Ticket Bot Um bot de suporte feito usando threads para o Discord, 100% customizável, feito em JavaScript e inspirado no Rio Helper do servidor Elixir

Dec 21, 2022
Owner
Ray Chang
Passionate about web dev and design, and devoted to programming as elegant as swinging a sword.
Ray Chang
100 Days of Code is a self improvement tool, where you make a commitment to solve 1 coding problem everyday for the next 100 days.

100 Days of Code is a self-improvement tool, where you make a commitment to solve 1 coding problem everyday for the next 100 days. This repository includes a range of tasks, lessons, resources, and challenges on various programming languages to help improve programming skills.

Tarleton Computer Society 7 Dec 14, 2022
Smooth scroll animation - vanilla JavaScript

Smooth Scroll Animation Using Vanilla JavaScript Provides smooth scroll functionality on clicking buttons with different eeasing properties. The "smoo

Bhagabati Prasad 4 Aug 14, 2022
a Vanilla JS Smooth Scroll to ⚓ script

Smooth Scroll Library ScrollToSmooth Support for older versions: If you need documentation for versions prior 3.0.0 visit this page Lightweight Vanill

Bastian Fießinger 15 Aug 14, 2022
Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mouse is over the marquee, and all with vanilla JavaScript.

TEG Marquee Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mou

Paul B. Joiner 0 Dec 30, 2021
Vanilla javascript (ES6) function enabling drag scrolling on desktop

Drag-n-scroll also on desktop devices, by LCweb No dependencies vanilla javascript function to easily implement a nice drag-to-scroll effect using dse

Luca 2 Apr 5, 2022
A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.

Cuberto Mouse Follower A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website. Dependencies GSAP v3 (

Cuberto 410 Dec 30, 2022
This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js. But in most cases, I would recommend you to use something like Express in a production project for productivity purposes.

Eduardo Dantas 7 Jul 19, 2022
🦜️🔗 This is a very simple re-implementation of LangChain, in ~100 lines of code

??️ ?? LangChain-mini This is a very simple re-implementation of LangChain, in ~100 lines of code. In essence, it is an LLM (GPT-3.5) powered chat app

Colin Eberhardt 204 Aug 14, 2023
A lightweight, performant, and simple-to-use wrapper component to stick section headers to the top when scrolling brings them to top

A lightweight, performant, and simple-to-use wrapper component to stick section headers to the top when scrolling brings them to top

Mayank 7 Jun 27, 2022
A collection of preloaded and essential files that makes the website more attractive, smooth and user friendly

Web-Docs A collection of preloaded and essential files that makes the website more attractive, smooth and user friendly How to use: git clone https://

MAINAK CHAUDHURI 23 Dec 17, 2022