Place "Scroll to top" button on bottom ...

This question is answered.

Reply to this Thread

Search Forum

Back to Thread List

Replies: 5 - Pages: 1 - Last Post: 28 Nov 23, 19:58 Last Post By: AenderF

Threads: [ Previous | Next ]

AenderF

Posts: 18
Registered: 9-Jun-2014

Place "Scroll to top" button on bottom right side
Posted: 17 Nov 23, 18:12

Want to place the “Scroll to Top” button from the left lower side to the right lower side. User experience shows that right-handed guys prefer to see that button at the right side. Is there a special reason why you placed that button as default on the lower left side?
This can be achieved by changing the CSS class from “scrollup {left:0;}” to “scrollup {right:0;}”. Do I miss another coding? What is the easiest way to have this change implemented in all my existing projects? Thanks in advance for your advice. ☻

Edited by: AenderF on 28 Nov 2023, 19:57

Laza

Posts: 1,661
Registered: 6-Sep-2005

Re: Place "Scroll to top" button on bottom right side
Posted: 17 Nov 23, 18:23

in response to: AenderF

Helpful

The right bottom corner is reserved for the Shopping cart and Feedback shortcut buttons.

.scrollup { left: auto; right:0; }

should work.

AenderF

Posts: 18
Registered: 9-Jun-2014

Re: Place "Scroll to top" button on bottom right side
Posted: 17 Nov 23, 19:23

in response to: Laza

Thanks LAZA for your quick reply. As I am not using the "Shopping cart" nor "Feedback" shortcut buttons, I would prefer to place it by default to the right bottom side. Does this make sense?
By the way: have you got the CSS coding for resizing this button (height, width) ??

Edited by: AenderF on 28 Nov 2023, 19:58

JeffTucker

Posts: 7,779
Registered: 31-Jan-2006

Re: Place "Scroll to top" button on bottom right side
Posted: 17 Nov 23, 20:44

in response to: AenderF

Helpful

AenderF wrote:
Thanks LAZA for your quick reply. As I am not using the "Shopping cart" nor "Feedback" shortcut buttons, I would prefer to place it by default to the right bottom side. Does this make sense?

Add the custom CSS code, then choose File > Save as Skin Default. This will not change existing projects, however - you'll have to add the custom code to each of them.

JeffTucker

Posts: 7,779
Registered: 31-Jan-2006

Re: Place "Scroll to top" button on bottom right side
Posted: 17 Nov 23, 20:56

in response to: AenderF

Correct

AenderF wrote:
By the way: have you got the CSS coding for resizing this button (height, width) ??

You don't actually resize the button. You need to resize the arrow itself - the button will adapt to the size of the arrow.

.icon-arrow-up:before {
	line-height: 1.5rem;
	font-size: 1.625rem;
}

The default values are 1.0rem and 1.125rem. Experiment.

AenderF

Posts: 18
Registered: 9-Jun-2014

Re: Place "Scroll to top" button on bottom right side
Posted: 18 Nov 23, 15:48

in response to: JeffTucker

I experimented with resizing the "scroll-up" button and decided to leave the "up-arrow" sign at the default value, but I managed to change the whole view by reducing the background width a bit by changing the padding left and right:
.scrollup {
padding: 1.2rem 0.8rem;
left: auto;
right:0; }
The "scroll-up" button at right side now satisfies my needs, both in desktop view and mobile view.
I must add that in large desktop view, the button now looks better on the right side, but in mobile view it depends on each user experience navigating with only the right thumb, the left thumb or both !

Edited by: AenderF on 18 Nov 2023, 15:48

Pages: 1

Back to Thread List

Threads: [ Previous | Next ]

Legend
	Forum admins
	Helpful Answer
	Correct Answer