Skip to content

Instantly share code, notes, and snippets.

@pixelomo

pixelomo/ScrollToTop.html

Last active March 8, 2017 10:43
Show Gist options
  • Save pixelomo/377acabff2ffaece66ec77bb36592f71 to your computer and use it in GitHub Desktop.
Save pixelomo/377acabff2ffaece66ec77bb36592f71 to your computer and use it in GitHub Desktop.
Download ZIP
Creating a simple scroll to top button. At the bottom of the document you'll see a button with the id of top. Below this I've included a link to jQuery followed by a simple script. First there's a function that is checking what the current window screoll position is, you can see this being logged in the console. When this reaches position 250 it…
Raw
ScrollToTop.html
<html>
<head>
<style type="text/css">
body{
text-align: center;
font-family: sans-serif;
}
h1{
font-size: 45px;
}
p{
font-size: 20px;
margin-bottom: 30px;
}
#top{
position: fixed;
bottom: 20px;
right: 30px;
padding: 20px 15px;
border-radius: 7px;
border: 0;
background: #323232;
color: #f2f2f2;
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
cursor: pointer;
outline: none;
opacity: 0;
transition: .3s ease-out;
}
#top.show{
opacity: 1;
}
</style>
</head>
<body>
<h1>Simple Scroll To Top Example</h1>
<p>Creating a simple scroll to top button. At the bottom of the document you'll see a button with the id of top. Below this I've included a link to jQuery followed by a simple script. First there's a function that is checking what the current window screoll position is, you can see this being logged in the console. When this reaches position 250 it adds the class of show to the button which adds opacity to the button. If you scroll back up past 250 the class is removed and the button is faded out. The fade is created by adding transition to the buttons CSS.</p>
<p>After this in the script there's a click handler that fires when the button is clicked. It animates html and body elements to scrollTop: 0 which is the top of the document in 800 milliseconds.</p>
<p>Kogi health goth kickstarter, mixtape yr flexitarian shoreditch. DIY celiac man bun, tattooed aesthetic mustache fap vaporware. Cornhole tousled typewriter, ramps austin before they sold out jean shorts echo park stumptown fanny pack kickstarter. Live-edge lumbersexual green juice ennui, VHS 3 wolf moon selvage sriracha dreamcatcher vexillologist tofu intelligentsia. Actually austin blog copper mug. Trust fund polaroid narwhal vice. Umami bespoke banjo microdosing, butcher offal organic YOLO chia beard authentic wolf mixtape cray lo-fi.</p>
<p>Kogi health goth kickstarter, mixtape yr flexitarian shoreditch. DIY celiac man bun, tattooed aesthetic mustache fap vaporware. Cornhole tousled typewriter, ramps austin before they sold out jean shorts echo park stumptown fanny pack kickstarter. Live-edge lumbersexual green juice ennui, VHS 3 wolf moon selvage sriracha dreamcatcher vexillologist tofu intelligentsia. Actually austin blog copper mug. Trust fund polaroid narwhal vice. Umami bespoke banjo microdosing, butcher offal organic YOLO chia beard authentic wolf mixtape cray lo-fi.</p>
<p>Kogi health goth kickstarter, mixtape yr flexitarian shoreditch. DIY celiac man bun, tattooed aesthetic mustache fap vaporware. Cornhole tousled typewriter, ramps austin before they sold out jean shorts echo park stumptown fanny pack kickstarter. Live-edge lumbersexual green juice ennui, VHS 3 wolf moon selvage sriracha dreamcatcher vexillologist tofu intelligentsia. Actually austin blog copper mug. Trust fund polaroid narwhal vice. Umami bespoke banjo microdosing, butcher offal organic YOLO chia beard authentic wolf mixtape cray lo-fi.</p>
<p>Kogi health goth kickstarter, mixtape yr flexitarian shoreditch. DIY celiac man bun, tattooed aesthetic mustache fap vaporware. Cornhole tousled typewriter, ramps austin before they sold out jean shorts echo park stumptown fanny pack kickstarter. Live-edge lumbersexual green juice ennui, VHS 3 wolf moon selvage sriracha dreamcatcher vexillologist tofu intelligentsia. Actually austin blog copper mug. Trust fund polaroid narwhal vice. Umami bespoke banjo microdosing, butcher offal organic YOLO chia beard authentic wolf mixtape cray lo-fi.</p>
<p>Kogi health goth kickstarter, mixtape yr flexitarian shoreditch. DIY celiac man bun, tattooed aesthetic mustache fap vaporware. Cornhole tousled typewriter, ramps austin before they sold out jean shorts echo park stumptown fanny pack kickstarter. Live-edge lumbersexual green juice ennui, VHS 3 wolf moon selvage sriracha dreamcatcher vexillologist tofu intelligentsia. Actually austin blog copper mug. Trust fund polaroid narwhal vice. Umami bespoke banjo microdosing, butcher offal organic YOLO chia beard authentic wolf mixtape cray lo-fi.</p>
<p>Kogi health goth kickstarter, mixtape yr flexitarian shoreditch. DIY celiac man bun, tattooed aesthetic mustache fap vaporware. Cornhole tousled typewriter, ramps austin before they sold out jean shorts echo park stumptown fanny pack kickstarter. Live-edge lumbersexual green juice ennui, VHS 3 wolf moon selvage sriracha dreamcatcher vexillologist tofu intelligentsia. Actually austin blog copper mug. Trust fund polaroid narwhal vice. Umami bespoke banjo microdosing, butcher offal organic YOLO chia beard authentic wolf mixtape cray lo-fi.</p>
<p>Kogi health goth kickstarter, mixtape yr flexitarian shoreditch. DIY celiac man bun, tattooed aesthetic mustache fap vaporware. Cornhole tousled typewriter, ramps austin before they sold out jean shorts echo park stumptown fanny pack kickstarter. Live-edge lumbersexual green juice ennui, VHS 3 wolf moon selvage sriracha dreamcatcher vexillologist tofu intelligentsia. Actually austin blog copper mug. Trust fund polaroid narwhal vice. Umami bespoke banjo microdosing, butcher offal organic YOLO chia beard authentic wolf mixtape cray lo-fi.</p>
<p>Kogi health goth kickstarter, mixtape yr flexitarian shoreditch. DIY celiac man bun, tattooed aesthetic mustache fap vaporware. Cornhole tousled typewriter, ramps austin before they sold out jean shorts echo park stumptown fanny pack kickstarter. Live-edge lumbersexual green juice ennui, VHS 3 wolf moon selvage sriracha dreamcatcher vexillologist tofu intelligentsia. Actually austin blog copper mug. Trust fund polaroid narwhal vice. Umami bespoke banjo microdosing, butcher offal organic YOLO chia beard authentic wolf mixtape cray lo-fi.</p>
<button id="top">Back To Top</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).scroll(function () {
let position = $(window).scrollTop();
console.log(position);
if (position >= 250){
$('#top').addClass('show');
} else {
$('#top').removeClass('show');
}
});
$('#top').click(function(){
$('html, body').animate({scrollTop : 0},800);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment