Scroll To Top

[Volksdevil]

As title, I'd love to see a nicely styled 'Scroll to top' extension. I'm guessing it may as well be an extension rather than just throwing some javascript/css together as we now have jQuery to make use of? I'm open to taking the latter approach if it's too much for the sake of scrolling back up the page...

Ideally I'd like to see the 'Scroll to top' within the actual 'Wrap' of the board too like Here rather than positioned on the browser window, maybe some transparency as well.

It should probably appear on every page that requires it (Not just topic pages), but forums, index, custom pages, memberlist etc etc.

Oh and of course it should be responsive! Change to a browser window and just show an arrow in a coloured box maybe?

[MattF]

Try this: https://github.com/VSEphpbb/scrolltotop
install to vse/scrolltotop

[Raul [ThE KuKa]]

Perfect VSE !!!

Thanks

[Volksdevil]

Thanks mate, really appreciate this. I just made a small error in my request though When I said within the wrap, what I actually meant was within <div id="page-body">. It's just a real bugbear of mine when a site has fixed width and the scroll is way off to the side of the content.

Is this possible at all?

EDIT: In fact, don't worry too much if it's hard work to adjust, I've tweaked the CSS so it's now centred, has opacity hover effect and border radius. Cheers again for this. Demo

Code: Select all

.scroll-icon {
height: 25px;
width: 50px;
border: 2px solid #000;
border-radius: 8px;
background-color: #0066ff;
opacity: 0.7;
position: fixed;
bottom: 2px;
right: 50%;
	display: none;
}

.scroll-icon .scroll-icon-arrow {
	height: 8px;
	width: 8px;
	border: 3px solid;
	border-right: none;
	border-top: none;
	margin: 9px 20px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
	color: white;
}

.scroll-icon:hover{
	text-decoration: none;
	cursor: pointer;
	opacity: 1.0;
}

/* responsive design */
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.scroll-icon {
		bottom: 8px;
		right: 8px;
	}
}