From 875c0b2a1293c547391a6b47fc671e630ff67aec Mon Sep 17 00:00:00 2001 From: 30secondsofcode <30secondsofcode@gmail.com> Date: Sat, 3 Mar 2018 12:44:13 +0000 Subject: [PATCH] Travis build: 1768 --- README.md | 28 ++++++++++++++++++++++++++++ docs/index.html | 8 +++++++- snippets/smoothScroll.md | 2 +- 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2578627df..4b1d509e2 100644 --- a/README.md +++ b/README.md @@ -214,6 +214,7 @@ average(1, 2, 3); * [`scrollToTop`](#scrolltotop) * [`setStyle`](#setstyle) * [`show`](#show) +* [`smoothScroll`](#smoothscroll) * [`toggleClass`](#toggleclass) * [`UUIDGeneratorBrowser`](#uuidgeneratorbrowser) @@ -3597,6 +3598,33 @@ show(...document.querySelectorAll('img')); // Shows all elements on the pa
[⬆ Back to top](#table-of-contents) +### smoothScroll + +Smoothly scrolls the element on which it's called into the visible area of the browser window. + +Use `.scrollIntoView` method to scroll the element. +Pass `{ behavior: 'smooth' }` to `.scrollIntoView` so it scrolls smoothly. + +```js +const smoothScroll = element => + document.querySelector(element).scrollIntoView({ + behavior: 'smooth' + }); +``` + +
+Examples + +```js +smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBar +smoothScroll('.fooBar'); // scrolls smoothly to the first element with a class of fooBar +``` + +
+ +
[⬆ Back to top](#table-of-contents) + + ### toggleClass Toggle a class for an element. diff --git a/docs/index.html b/docs/index.html index 6cc929870..8b71db2f2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -74,7 +74,7 @@ document.getElementById('doc-drawer-checkbox').checked = false; } }, false); - }

logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.

 

Adapter

ary

Creates a function that accepts up to n arguments, ignoring any additional arguments.

Call the provided function, fn, with up to n arguments, using Array.slice(0,n) and the spread operator (...).

const ary = (fn, n) => (...args) => fn(...args.slice(0, n));
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
 
Adapter
ary
Creates a function that accepts up to n arguments, ignoring any additional arguments.
Call the provided function, fn, with up to n arguments, using Array.slice(0,n) and the spread operator (...).
const ary = (fn, n) => (...args) => fn(...args.slice(0, n));
 
const firstTwoMax = ary(Math.max, 2);
 [[2, 6, 'a'], [8, 4, 6], [10]].map(x => firstTwoMax(...x)); // [6, 8, 10]
 
call
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args);
@@ -800,6 +800,12 @@ document.bodyShow examples
setStyle(document.querySelector('p'), 'font-size', '20px'); // The first <p> element on the page will have a font-size of 20px
 
show
Shows all the elements specified.
Use the spread operator (...) and Array.forEach() to clear the display property for each element specified.
const show = (...el) => [...el].forEach(e => (e.style.display = ''));
 
show(...document.querySelectorAll('img')); // Shows all <img> elements on the page
+
smoothScroll
Smoothly scrolls the element on which it's called into the visible area of the browser window.
Use .scrollIntoView method to scroll the element. Pass { behavior: 'smooth' } to .scrollIntoView so it scrolls smoothly.
const smoothScroll = element =>
+  document.querySelector(element).scrollIntoView({
+    behavior: 'smooth'
+  });
+
smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBar
+smoothScroll('.fooBar'); // scrolls smoothly to the first element with a class of fooBar
 
toggleClass
Toggle a class for an element.
Use element.classList.toggle() to toggle the specified class for the element.
const toggleClass = (el, className) => el.classList.toggle(className);
 
toggleClass(document.querySelector('p.special'), 'special'); // The paragraph will not have the 'special' class anymore
 
UUIDGeneratorBrowser
Generates a UUID in a browser.
Use crypto API to generate a UUID, compliant with RFC4122 version 4.
const UUIDGeneratorBrowser = () =>
diff --git a/snippets/smoothScroll.md b/snippets/smoothScroll.md
index de024bf68..c3e045ab7 100644
--- a/snippets/smoothScroll.md
+++ b/snippets/smoothScroll.md
@@ -8,7 +8,7 @@ Pass `{ behavior: 'smooth' }` to `.scrollIntoView` so it scrolls smoothly.
 ```js
 const smoothScroll = element =>
   document.querySelector(element).scrollIntoView({
-      behavior: 'smooth'
+    behavior: 'smooth'
   });
 ```