Scroll To Top of Page Button

Forms SharePoint Online
1

Reviewing other posts such as Scroll to error or top of page on submit and others, I have tried adding this onclick line to my button. The button is located where I want and looks good but it doesn’t scroll to the top of the page when clicked.

Anyone have a quick solution? I bet it is easy but I can’t find any direct match to my need in the the Community posts.

ButtonOnClick
ButtonOnClick607×161 3.94 KB

I have tried this from W3schools.com as well:

function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

Button CSS

.top-button-float {
/*display: none; Hidden by default /
position: fixed; /Fixed/sticky position/
bottom: 100px; /Place the button at the bottom of the page/
right: 20px; /Place the button 30px from the right/
border: 1px solid #ccc; /Border/
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /Shadow effect/
transition: transform 0.3s ease; /Smooth transition/
padding: 10px;
border-radius: 5px;
z-index: 1000; / Higher value to stay above other elements */
background-color: black !important;
}

JumpToTop
JumpToTop374×776 17.2 KB

2

Hi @shedev,

Have you tried scrollTo()?

window.scrollTo(0, 0);

This should work in all modern browsers. Note that it won't work for a Public form preview since previews are rendered via iframes; this code is only for the form page.

3

@IliaLazarevskii - I have tried this and tried again just now with no success.

GENERAL > CLICK:

ScrollToCVialick
ScrollToCVialick1277×698 69.7 KB

4

Hi @shedev,

Could you share more about which version of the app you use and how the form is opened?

5

@IliaLazarevskii - Sure! I am using Plumsail Forms 4.0.3 for SharePoint Online. I have many buttons on the page that are working as expected but the “Jump to Top” does not. Thank you for asking!

6

Hello, @IliaLazarevskii. I hope you are well today :slight_smile:

I still do not have a functional “JUMP TO TOP” button. I have tested this on latest versions of Chrome, Edge, and Firefox on both a MAC and Windows device.

I am also using TABS in my layout and have tried placing the button in one of the tabs and on the outside of the control (which is ideally where I want it), and nothing seems to work.

Click code: window.scrollTo(0, 0);

Any thoughts you have are welcomed.

Thank you as always.

7

Dear @shedev,
Can you link us the form where it can be reproduced? It should work - ScrollTop

image
image455×310 9.04 KB

8

@Nikita_Kurguzov - thank you for reaching out. This is an authenticated site; how would you like me to send you the file - export form and email?

9

Dear @shedev,
It wouldn't help if the form works correctly on a shared page, but doesn't work on your site.

If the site is authenticated, then try to reproduce it in some section where it can be shared with us, and send us a link to test it with some temporary creds.

We need a way to reproduce it in your environment, or as close to it as possible. Can be a similar page on a freely accessible web site, as long as it has the same issue.

10

Understood, thank you @Nikita_Kurguzov . I am reviewing all code now.