Scroll anchors

Published: 4 Feb 2020

Simple Anchor implementation

In this short writeup ill show you how to implement scroll anchors to scroll to what we call 'anchors' on your page.

Automatic scrolling, a lot of websites use it. You see it often in single page websites, in form validation and some websites even use it after search pages to show you where on the page your query is located.

An example speaks for itself.

How does it work?

We define 2 HTML nodes with unique identifiers

<p id="example-start">An example speaks for itself.</p>
<p id="example-end">Welcome!</p>

Now we have two elements with unique IDs that we later on use to target the elements. You do not need to use IDs but it makes it pretty easy for sample's sake. Now we need some trigger event, in this case we use some buttons, but later on I'll show you how to use query params to do this

<button type="button" data-scroll="example-end" class="btn btn-primary anchor_link">Press me</button>  
<button type="button" data-scroll="example-start" class="btn btn-primary anchor_link">Press me to go back</button>

So we defined two elements with data attributes, we named them data-scroll for clarifcation sake.

Now we need some javascript logic to perform an action with these data attributes

$( document ).ready(function() {
    $('.anchor_link').click(function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $('#' + $(this).data('scroll')).offset().top
        }, '300');
    });
});
/* Sometime you need to take a navigation element into account and you could do something like...*/
// scrollTop: $('#' + $(this).data('scroll')).offset().top - $("#navbar").height()

What we do here is a on click event on the class 'anchor link', a class shared by the buttons we defined earlier. Once clicked we do a 'animate', wich is just a jquery function to make our next action look nicer, wich is scroll top. Scroll top takes an offset argument, an offset of 0 would be the top of your page. This is where the data-scroll matching the element ID comes in. We find the data-scroll of the clicked button with $(this).data('scroll') if we wrap that inside a selector like so: $('#' + $(this).data('scroll') we find the ID(#) with the same name as the data-scroll. Now we can find its position on the web page with $('#' + $(this).data('scroll')).offset().top This returns the pixels distance between the top and the element, the exact position we want to scroll to!

Welcome!

CSS scroll behaviour

We can use CSS to change the behaviour of scrolling on the webpage, in our example above we use jquery to animate the scroll but there are other ways to smooth out scrolling

Scroll to searchterms

So say you have a search on your website that returns a list of links as search results. By adding a single query parameter to that link we can improve the user experience for the user by scrolling to the search term on the page, and even highlighting the occurences on the page.

For convience I've added the logic to this page, and by submitting this small form you can perform a search on this page. It is preloaded so just press submit.

Note: There is no extensive logic behind this, so it will not perform any action when the search result returns nothing and if the query is 3 or less characters.

I suppose that is it for now, to be updated at some point.

You can find the complete code here:

Resources:

Words can not describe how helpfull these guys are.
Mort Mort - Anti Aliasing for beginners
Mort Mort - 3 PixelArt Techniques/Common Mistakes (Doubles, Jaggies & Outline)
Pedro Medeiros and everyone @studiominiboss

That is it for this one, if you notice any mistakes or just want to leave me a message, leave a comment below.