Show/Hide a button on page when scrolling >200px from the top

Ask the community
,
1

Hello everyone

I have a button (#buttonScrolltop) pinned on all my website pages and I wish it to be displayed only when the visitor starts scrolling from about 200px from the top of the pages …

I set the button as “hidden” in initial state. ID button : #buttonScrolltop

I write this code but it does not work ! Someone to help me please?

function scrollFunction ( window ) {
$w ( window ). scroll ( function () {
if ( $w ( this ). scrollTop () > 200 ) {
$w ( ‘#buttonScrolltop’ ). show ();
} else {
$w ( ‘#buttonScrolltop’ ). hide ();
}
});
}

Thanks a lot
Seb

2

You should add an anchor to the page (make it global) and place it 200px from the top.
Then -

//masterPage.js
$w.onReady(() => {
$w('#anchor1').onViewportLeave(()=> {
	$w('#buttonScrolltop').show();
})
$w('#anchor1').onViewportEnter(()=> {
	$w('#buttonScrolltop').hide();
})
})
3

@J.D. Thanks a lot, I was in a wrong way.
But now I have to learn how to set an anchor with coding it … I have to use “const” or “var” ?

4

No. You don’t add it with code.
It’s an element that you add through the editor.
See:

https://support.wix.com/en/article/wix-editor-adding-and-linking-anchors#adding-anchors-to-your-site

5

@jonatandor35 Thanks a lot again J.D.

I have done this, and works perfectly but I dont know if it is “js friendly” or if there is a better/other way :

1) I have added a button on one of my page and “copy-past” it on all my pages. The button have the same ID (#buttonScrolltop) in all my pages

2) Then I have named all my 1st Sections (sectionheader) on all my pages with the same ID (#sectionTop)

3) Then I put the code (your code) into MasterPage.js

//button scroll to the top
$w . onReady (() => {
$w ( ‘#sectionTop’ ). onViewportLeave (()=> {
$w ( ‘#buttonScrolltop’ ). show ( “fade” );
})
$w ( ‘#sectionTop’ ). onViewportEnter (()=> {
$w ( ‘#buttonScrolltop’ ). hide ( “fade” );
})
})

… and works perfectly :smiley:

Thousand thanks and best regards

Sébastien

6

@sebastienroten If you used a transparent element (such as line), you can make it Global and then you don’t have to copy and paste it to every page.

559×563 20.8 KB

Element mouse right click > Show on All Pages