Anchor Link: smooth scroll don't work

Getting Started
12

I tested this and it works.

Keep all your plugin stuff for the external page.

But for the scrolls done from the hype scene do this.

Have the button call a hype function.

In the function put this code.

var myTarget = document.querySelector('#etage')
	 
	 jQuery("html, body").animate({scrollTop: parseInt(myTarget.offsetTop, 10)  }, 800);

----Explanation

Line 1,
var myTarget = document.querySelector('#etage')

find the element on the parent page.

Line 2
jQuery

We are using jQuery which is a javascript library that allows you to code things in a short code ( basic Explanation)

Normally we add the library to our project and start Jquery commands with a dollar symbol $.
But wordpress has it's own jQuery library.

This means if we put a jQuery library in Hype it would not work as expected when in a wordpress doc.

To fix this we explicitly use jQuery instead of $. This forces all jQuery through the wordpress library.

"html, body"

This is the target elements of the command. Which in this case are the main documents body,html DOM elements.

.animate()

This is a JQuery command to animate the CSS properties changes we call inside it.

, 800
Is an option for the animate. This is the speed in milliseconds for the completion of the animation.

scrollTop

You know already

offsetTop
get the elements top in relation to the parents top.

The offsetTop returns a string '500px' instead of number 500

So we surround the call in a parseInt()
The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

I wrote some extra tips about using Jquery here

3 Likes