Fuzzy Scroll

Improved scroll-to behavior

Demo

Use one of these scroll-to links to see the fuzzyScroll() function in action. Their scroll-to target is the heading, but the desired effect is for the window to scroll-to a position where the blue border above the heading is still visible on the page.

Scroll to:

  1. Favorites
  2. Messages
  3. Settings

Favorites

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur at cupiditate est et, fugiat illum modi quisquam quo rerum voluptatum! Architecto consequuntur culpa delectus numquam quisquam? Alias consectetur libero sed?Aspernatur eligendi error facere inventore iste reiciendis. Autem id iure, porro quisquam quos tenetur totam? Amet consequuntur deleniti, distinctio molestiae necessitatibus obcaecati pariatur quo repudiandae sapiente totam veniam vero vitae!Accusantium adipisci aliquid animi assumenda culpa dolores doloribus fuga fugit ipsa nulla odio officiis pariatur praesentium provident, quam qui quos rerum sit suscipit, tempora tempore, unde velit voluptates! Neque, vel.Ab cum nisi nulla ratione rem tenetur? Consequuntur cupiditate deleniti eaque eveniet ex in placeat porro quibusdam quo quod? Accusamus fuga ipsa quia! Accusantium eligendi laboriosam minus neque repudiandae voluptas?

Return to top of demo

Messages

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur autem beatae consequatur debitis dolore, eaque facere harum incidunt labore maxime minus modi mollitia natus odio provident quibusdam veniam voluptatem!Ab aliquam animi cumque illo minus optio quis voluptates? At atque, eum exercitationem explicabo in nulla qui ullam unde. Explicabo inventore odit placeat quae rem suscipit veritatis! Aperiam, ratione, repellendus!Aliquid corporis culpa distinctio est, expedita explicabo hic ipsa ipsum nam necessitatibus nemo, nesciunt quidem quos rerum saepe tempore veritatis voluptatum! Distinctio dolor eaque enim ipsa quae similique ut vel.Accusantium ad asperiores blanditiis culpa ipsam provident sit, voluptatum. Alias aut cumque dicta dignissimos dolorum enim et exercitationem fuga ipsa nobis praesentium, quam recusandae, reprehenderit sint temporibus voluptatem, voluptatum? Commodi.

Return to top of demo

Settings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis iste nesciunt quasi sit! A eum inventore laudantium maiores omnis pariatur, repellat vero. Ad architecto doloremque eaque enim, labore officiis sint!Ad adipisci asperiores at deserunt, ipsa, minima, molestiae molestias nobis odit perferendis perspiciatis quasi repellat sint veritatis voluptatem! Blanditiis cum ea facilis impedit, incidunt pariatur tempora tempore ullam veritatis voluptatem?Necessitatibus omnis optio porro saepe temporibus. Accusantium alias aliquam animi asperiores at atque consectetur culpa cum cumque eveniet ipsa molestias odit, officia, optio, placeat quas repellat similique sunt totam vitae.Adipisci, culpa, obcaecati? Animi aperiam assumenda consequatur consequuntur cupiditate, dignissimos doloremque ducimus ea enim error, excepturi exercitationem ipsum iure labore laborum natus optio praesentium recusandae soluta veritatis. Amet, nisi, voluptates!

Return to top of demo

How to:

HTML, CSS, and Javascript

The following code samples are implemented on this site using Laravel Blade, Tailwind, Daisy UI, and Font Awesome.

Let's start with function to handle the scroll:

Javascript

/**
 * Scroll the window to a specified (X, Y) location, where 'Y' is some number
 * of pixels above a target element. Use a negative 'Y' to scroll below the element.
 *
 * @param {String} el CSS query selector for the target element to be scrolled to.
 * @param {Number} fuzz Vertical padding for scrollTo().
 * @param {Number} [x] Horizontal coordinate for scrollTo(). default is 0.
 *
 * @return {undefined}
 */
function fuzzyScroll(el, fuzz, x = 0)
{
    // get the bounding box of the target element
    const rect = document.querySelector(el).getBoundingClientRect();

    // get the location of the target element on the page
    const distanceToScrollY = rect.top + window.scrollY;

    // scroll the window, above or below the target element
    window.scrollTo(x, distanceToScrollY - fuzz);
}
/**
 * Scroll the window to a specified (X, Y) location, where 'Y' is some number
 * of pixels above a target element. Use a negative 'Y' to scroll below the element.
 *
 * @param {String} el CSS query selector for the target element to be scrolled to.
 * @param {Number} fuzz Vertical padding for scrollTo().
 * @param {Number} [x] Horizontal coordinate for scrollTo(). default is 0.
 *
 * @return {undefined}
 */
function fuzzyScroll(el, fuzz, x = 0)
{
    // get the bounding box of the target element
    const rect = document.querySelector(el).getBoundingClientRect();

    // get the location of the target element on the page
    const distanceToScrollY = rect.top + window.scrollY;

    // scroll the window, above or below the target element
    window.scrollTo(x, distanceToScrollY - fuzz);
}

If you are so inclined, you can add attach this function to the window object. Perhaps in your app.js file.

Javascript

document.addEventListener("DOMContentLoaded", () =>
{
    window.fuzzyScroll = fuzzyScroll;
});
document.addEventListener("DOMContentLoaded", () =>
{
    window.fuzzyScroll = fuzzyScroll;
});

Then we need a button or some text for the user to click on:

HTML

<p>
    <span class="link link-primary" onclick="window.fuzzyScroll('#targetHeading', 50)">Target Heading</span>
</p>

<div class="mt-12 py-12 border-t-2 border-sky-400>
    <h3 id="targetHeading">Target Heading</h3>
    <p>...</p>
</div>
<p>
    <span class="link link-primary" onclick="window.fuzzyScroll('#targetHeading', 50)">Target Heading</span>
</p>

<div class="mt-12 py-12 border-t-2 border-sky-400>
    <h3 id="targetHeading">Target Heading</h3>
    <p>...</p>
</div>

In the example above we are using a value of 50 for the fuzz because Tailwind is providing 48px of top margin and a border that is 2px wide.

If you have questions about how to use fuzzyScroll() to implement improved scroll-to behavior on your website, hit me up on LinkedIn or Github.

Project Galleries

Tool

Color Average

Blend two colors to get their linear and logarithmic mid-point.

Tool

Multi Tab Opener

Like bookmarks on steroids: time released links with options and storage.

App

Jitter Bug

Simulated page traffic and product sales for marketing.

App

Shopping Cart

Originally made for use on Unbounce with Checkout Champ.

Tool

Public Library

A nifty little reading lens for classic novels using the Spritz SDK.

Color Average

Tool

Blend two colors to get their linear and logarithmic mid-point.

Sometimes working with graphics and photos you find yourself wondering:

  • "What would I get if I mix these two colors?"
  • "What color is in the middle of my gradient?"
  • "What would a half-steps color palette look like?"

I found myself wondering those questions so often that I made a nice little color calculator. Just use the two color pickers, and it will automatically blend those two colors for you.

It will tell you both the linear and the logarithmic midpoint of your chosen colors. The linear value is the average of the RGB channels. Because color gamuts are not linear, a simple average is not the best representation of a color blend. The logarithmic midpoint is calculated using Euclidean average, giving you the "correct" color blend.

Open

Multi Tab Opener

Tool

Like bookmarks on steroids: time released links with options and storage

Do you sit in an office opening links all day? Do you find yourself opening the same handful of links over and over? Then you probably just need a browser bookmarks folder.

But, do you find yourself:

  • interacting with people and then having to open a long list of links, one by one?
  • having to open up the same long list of links every so often?
  • wanting to check if a group of web pages are reachable?
  • and you want to do that without throttling your browser?

Well then, I have got something for you. Think of it like time released links with options and storage. Unlike bookmarks, you can control how fast your list of links will open. Instead of shocking your bandwidth with opening 10, 20, 30, or more URLS all at once- the Multi Tab Opener will slowly open each link one at a time. You can control how fast or slow each link will be opened in a new tab. You can also save and edit lists of links to your browser's local storage.

Open Clone

Jitter Bug

App

Simulated page traffic and product sales for marketing

#marketing #javascript

Do you want to:

  • create a sense of urgency on your landing pages?
  • make it look like people are actively interested in your products?
  • and have customized control over it
  • without spending time and money building a real data stream?

Then you should add some dynamic jitter to your web pages. You can decide how much and how often:

  • your "products sold" will rise
  • and your "page views" will fluctuate

The best part about Jitter Bug is that these updates look and feel organic. Its timers trigger these changes at different intervals. Jitter Bug can be configured with default or custom settings for one or more products on a page. Your "page views" will bounce between a high and low value while your "products sold" will gradually increase. The numbers displayed for "page views" will be updated in unison for all instances, while the numbers for "products sold" will be updated individually and at different times. Jitter Bug's settings allow you to decide where those numbers start, how much, and how often those values will be updated.

View Clone

Shopping Cart

App

Originally made for use on Unbounce with Checkout Champ

#ecommerce #bootstrap #jQuery

It's an easy-to-use shopping cart UI that can send your customers to a checkout page.

  • Handles one or more products and product variations
  • Cart UI is unobtrusive and easily accessible
  • Pleasantly animated additions and product removals
  • Supports coupon codes
  • Supports URL parameter retention
  • Handles currency formatting in USD by default
  • Has a built-in debug mode

I built this shopping cart when I was working for a publishing company. It needed to run on landing pages built with Unbounce's WYSIWYG, so we could integrate them into a checkout flow using Checkout Champ as the payment processor. Unbounce and Checkout Champ are popular service providers in the marketing world. If that's you then there's a good chance this shopping cart should work for you with very little configuration. You'll need to replace the example content with your own product IDs, names, descriptions, and prices. The cart can be very easily adapted to work for a different payment processor.

View Clone

Public Library

Tool

A nifty little reading lens for classic novels using the Spritz SDK

A collection of books, sourced from Project Gutenberg, presented through a speed reader.

When you're reading, it takes time to move your eyes across the page. You can read much faster if you move the words instead

I came across an SDK called Spritz toward the end of my college days. It allows you to scan a body of text and then flash each word on the screen. You can control how long words stay on the screen. It takes just a little bit of practice, but you could find yourself easily going from reading 200 words per minute to 400 or more.

See it for your self!

Open