jQuery Smooth Scroll to Anchor

princebazawule.com scroll to anchor

View Demo

We all know that jQuery is a brilliant Javascript library, which can be used to add interactivity to our web pages.

One such interactivity is smoothly scrolling to the appropriate section of your page on clicking a link… Smoooov, right?

The following jQuery snippet can be used to achieves this:


What is happening here?

a[href*="#"]:not([href="#"]) targets all anchors.

On click, it checks that the link is pointing to same page and same domain: (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname).

Remainder of the script sets up the target, then uses scrollTop(); and animate(); to smoothly scroll the web page to that section.

Hopefully this is helpful… Do not hesitate to post any improvements.


JSFiddle Demo

Absolutely Center Element within Parent with CSS Transform


View Demo

Sometimes it is necessary to absolutely (horizontally and vertivally) position an element within its parent, regardless of the width or height of either.
Pre-requisite is: the Parent must have position: relative;

Use the following to achieve this:

/* element to be centered */
.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);


What is happening here?

Basically the CSS left and top properties are based on the size of the parent element. The transform property is based on the size of the target element.
Hopefully this is helpful.


JSFiddle Demo