Skip to content

Instantly share code, notes, and snippets.

@tasukujp

tasukujp/TOPに戻る.markdown

Last active August 29, 2015 14:23
Show Gist options
  • Save tasukujp/898126909649435a4207 to your computer and use it in GitHub Desktop.
Save tasukujp/898126909649435a4207 to your computer and use it in GitHub Desktop.
Download ZIP
TOPに戻る
Raw
index.html
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TOPに戻る</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="content">
<h1>Return to the TOP</h1>
<b>scroll down...</b>
</div>
<div id="page-top">
<a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
</div>
</body>
</html>
Raw
script.js
$(window).scroll(
function(){
var now = $(window).scrollTop();
if(now > 500){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
}
);
$("#move-page-top").click(
function(){
$("html,body").animate({scrollTop:0},"slow");
}
);
Raw
style.css
#content {
width: 400px;
height: 5000px;
margin-left: auto;
margin-right: auto;
border:1px solid #d5d5d5;
text-align: center;
}
#page-top{
display: none;
position: fixed;
right: 30px;
bottom: 30px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:#333;
text-decoration: none;
display: block;
cursor: pointer;
}
#move-page-top:hover{
color:#009416;
}
@media only screen and (min-width: 600px){
#page-top{
right:50%;
margin-right: -300px;
}
}
Raw
TOPに戻る.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment