Anchor Link: smooth scroll don't work

Getting Started
1

Hello,

My website homepage works with 2 rows:
Row 1: Hype animation with an anchor link (#row2)
Row 2: classic content (below the animation)

When I click on the link of the Hype animation, the scroll works well until row 2 but it is not smooth.

If I use this same link outside of a hype animation, the scroll movement is soft.

How to get a soft scroll with a link in a Hype animation?

This is very important: if the smooth scroll does not work, I have to abandon the Hype anmation, and I have worked on this animation

Regards

2

Howdy Pierre,

I'm not sure what you mean by a 'soft' scroll. Seeing an example would be great, as well as pointing out what you're expecting to see.

If you're linking to anchors and you want to ensure that anchor links scroll smoothly, you would use something like the second technique listed here: Scroll smoothly to the bottom of the page - #6

3

The pb is only the smooth scroll:

If I click on the link “WEB” outside the Hype animation, it works
If I click on the “Web” link of the Hype animation, it does not work

You ca test here : https://www.pierrecommenge-design.com/SITE-V2/pierre-commenge-design/#etage

I attach the Hype file. The link is on the “WEB” button :
test-smooth-scroll-(button “WEB”).hype.zip (75.9 KB)

Important: my web layout is not totally in a hype animation, the smooth scrool must work on a classic web page.

Thanks!!

4

From what I can see is you are using a word press plugin to control page scroll.
The anchor is actually a shortcode for the plugin.

So I think you could simply just put the full url in the ‘Go to Url’ i.e instead of the shortcode

use:
https://www.pierrecommenge-design.com/SITE-V2/pierre-commenge-design/#etage

That may work

5

Hello,

Thank you for your answers but it does not work. I had already tested.

What I do not understand is that if I use link “#etage” on a text html outside the animation, it works. But if I use this same link in a Hype animation, it does not work.

For the Smooth scroll function I use the Wordpress plugin "Page scroll to ID"but I have already tested 3 other plugins.

I hope I will find a solution, otherwise, I really have to give up my animation.

Thanks !

6

I did look at the documentation and it confirms a normal url link when coming from another page should work.

But maybe it is just not picking up when coming from Hype.

This is hard for use to test because of your setup.

I am thinking if you place some functions in the Hype head then when called do the hash change when called from a Hype button it may work…

7

Just a thought,

just add #etage in the Go to Url

8

Thanks the pb is not the link, it works normally, but it’s the smooth scroll that does not work.

Otherwise, I already used the #etage link the first time because it worked perfectly with smooth scroll from any anchor outside the animation…

I tested:

  • on another site with another theme
  • a “classic” publication (without OAM file)

I do not know what to test anymore.

Thanks

9

It looks like they are potentially hooking into <a> link elements instead of listening to window.location change events which is why using go to URL with the #etage anchor isn’t working. There’s probably two options:

  • Use the inner HTML of the element in Hype and create a <a href = "#etage">web</a> tag. This may not work depending on their hook construction.
  • Call their API directly with a Run JavaScript action. From reading their docs, it looks like the code would be:
    $.mPageScroll2id("scrollTo","#etage");
10

Thank !!!

I am not a developer but I tried:
Note: In Page Scrool to ID, I use: a [href * = #]: not ([href = #])

  1. In Hype> “Trigger Custom Behavior”:
    I use “<a href = "#etage"> web </a>”

  2. In Hype> Action> Run javascript, I added:
    $ .mPageScroll2id ("scrollTo", "# floor");

It do not work

But if there is a Wordpress solution without the Scroll to ID plugin, that’s fine too. It’s the Hype animation that is a priority for me.

Thanks !

11

It would not be trigger custom behavior. You'd just take an element, and choose Edit > Edit Element's Inner HTML and then add that text and see if it works. (But like I said, there's a good chance this won't).

It may be that you have an error here, the spacing is kind of weird. I'd try the exact line that I posted above, especially since the anchor tag seems to be #etage. That said I don't have a setup to try this, so it is only speculation! There are definitely other libraries folks have used for smooth scrolling; here's the previously link but I'd guess there are other solutions.

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
13

Thank you very much for these explanations and the time spent to find a solution, it is complex but it works !!!

I hope that the next version of Hype will improve the compatibility with Wordpress, the smooth scroll function is basic in an animation or a website.

On my side, this small function changes the whole approach that I can have of a web project on Wordpress and the use of Hype.

And I also thank the developers of Tumult for the Wordpress plugin “Tumult Hype Animations” which saves a lot of time to load animations in .OAM format.

Thanks !!!

4 Likes