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

**URL:** <https://forum.wixstudio.com/t/show-hide-a-button-on-page-when-scrolling-200px-from-the-top/7644>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [February 3, 2022, 4:01pm UTC](https://forum.wixstudio.com/t/show-hide-a-button-on-page-when-scrolling-200px-from-the-top/7644 "2022-02-03T16:01:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sebastienroten](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/sebastienroten/32/5850_2.png) [@sebastienroten](https://forum.wixstudio.com/u/sebastienroten)\
**Post date:** [February 3, 2022, 4:01pm UTC](https://forum.wixstudio.com/t/show-hide-a-button-on-page-when-scrolling-200px-from-the-top/7644/1 "2022-02-03T16:01:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [February 3, 2022, 5:39pm UTC](https://forum.wixstudio.com/t/show-hide-a-button-on-page-when-scrolling-200px-from-the-top/7644/2 "2022-02-03T17:39:45Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![sebastienroten](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/sebastienroten/32/5850_2.png) [@sebastienroten](https://forum.wixstudio.com/u/sebastienroten)\
**Post date:** [February 4, 2022, 9:27am UTC](https://forum.wixstudio.com/t/show-hide-a-button-on-page-when-scrolling-200px-from-the-top/7644/3 "2022-02-04T09:27:37Z")

</div>

@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” ?

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [February 6, 2022, 12:17am UTC](https://forum.wixstudio.com/t/show-hide-a-button-on-page-when-scrolling-200px-from-the-top/7644/4 "2022-02-06T00:17:59Z")

</div>

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](https://support.wix.com/en/article/wix-editor-adding-and-linking-anchors#adding-anchors-to-your-site)

---

<div class="post-metadata">

**Author:** ![sebastienroten](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/sebastienroten/32/5850_2.png) [@sebastienroten](https://forum.wixstudio.com/u/sebastienroten)\
**Post date:** [February 7, 2022, 10:52am UTC](https://forum.wixstudio.com/t/show-hide-a-button-on-page-when-scrolling-200px-from-the-top/7644/5 "2022-02-07T10:52:13Z")

</div>

@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 😃

Thousand thanks and best regards

Sébastien

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [February 7, 2022, 1:02pm UTC](https://forum.wixstudio.com/t/show-hide-a-button-on-page-when-scrolling-200px-from-the-top/7644/6 "2022-02-07T13:02:29Z")

</div>

@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.

 ![](https://us1.discourse-cdn.com/wix/original/3X/1/4/14aa7026e431f0ed7c97ecfdabcc77c4eb269db5.png)  
Element mouse right click \> Show on All Pages