1
\$\begingroup\$

I wanted to make a button that goes to the top of the page but only appears when you're not at the top. There are probably libraries that already do this, but I wanted to make it myself and after some tinkering the following is what I came up with.

There is an occasional annoyance from quickly scrolling up & down with the mouse-wheel which causes jitters/unwanted permanence of the button @ top, but otherwise it works.

setInterval is throttled in consideration for performance. I really get the feeling this could be improved, so I wondered if there is a more idiomatic/better way. What do you think?

var scrollVisible = false;
var userScrolled = false;

window.addEventListener('load', init, false);

function init() {
	window.addEventListener('scroll', function() {
		userScrolled = true;
	}, false);
	
	setInterval(function() {
	    if(userScrolled) {
	    	if (window.pageYOffset == 0 && scrollVisible) {
	    		document.getElementById("scrollbutton").style.visibility = 'hidden';
	    		scrollVisible = false;
	    	} else if (!scrollVisible) {
	    		document.getElementById("scrollbutton").style.visibility = 'visible';
	    		scrollVisible = true;
	    	}
	        userScrolled = false;
	    }
	}, 100);
}

function scrollUp() {
	scrollTo(0, 0);
}
body {
	background-color: #272822;
	color: #F3F3F3;
}

#scrollbutton {
	background-color: #666664;
	border-radius: 100%;
	position: fixed;
	visibility: hidden;
	font-size: 1.5em;
    bottom: 0;
    right: 0;
}
#scrollbutton:hover {
	color: #A6E22E;
}
<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="test.css"/>
	<script src="test.js"></script>
	</head>
<input type="button" value="&#8679" id="scrollbutton" onclick="scrollUp();"/>
	<body>
		<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
		</p>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>   
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
        <br>
		<br>
		<br>
		<br>   
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text.
    It has roots in a piece of classical Latin literature.
		</p>
	</body>
<html>

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

I doubt that you need the throttling. Modern browser make a lot of decisions in response to events; this code is rather insignificant.

If anything, having a continuously ticking timer is counterproductive, especially on mobile devices. I'd rather have a flurry of activity during the brief periods when scrolling is happening, and no activity at all when idle.

I would recommend toggling the visibility of the button more indirectly, using CSS. Add or remove an scrolled-down class on the body element depending on whether the document is scrolled down. Let the cascading rules take care of the rest.

function noteScrollPosition() {
    if ((window.pageYOffset == 0) != (document.body.className.indexOf('scrolled-down') < 0)) {
        if (window.pageYOffset == 0) {
            document.body.className = document.body.className.replace(/ *scrolled-down/, '');
        } else {
            document.body.className += 'scrolled-down';
        }
    }
}
window.addEventListener('load', noteScrollPosition, false);
window.addEventListener('scroll', noteScrollPosition, false);

function scrollUp() {
    scrollTo(0, 0);
}
body {
	background-color: #272822;
	color: #F3F3F3;
}

#scrollbutton {
	background-color: #666664;
	border-radius: 100%;
	position: fixed;
	font-size: 1.5em;
	bottom: 0;
	right: 0;
	visibility: hidden;
}
body.scrolled-down #scrollbutton {
	visibility: visible;
}
#scrollbutton:hover {
	color: #A6E22E;
}
<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="test.css"/>
	<script src="test.js"></script>
	</head>
<input type="button" value="&#8679" id="scrollbutton" onclick="scrollUp();"/>
	<body>
		<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
		</p>
		<p style="margin-top: 100em;">
	Contrary to popular belief, Lorem Ipsum is not simply random text.
    It has roots in a piece of classical Latin literature.
		</p>
	</body>
<html>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.