jQuery

【jQuery】シンプルなスムーススクロールを実装Smooth Scroller

April 28, 2018
Smooth Scroller

Smooth Scrollerはシンプルなスムーススクロールを実装。

HTML

	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<link type="text/css" rel="stylesheet" media="all" href="./css/style.css">
</head>

	<body>
		<div class="content">
        	<div id="scrollTop">	
				<a href="#" class="scrollToBottom">Scroll to bottom</a>
            </div>
			<div id="scrollBottom">	
				<a href="#" class="scrollToTop">Scroll to top</a>
            </div>
		</div>

	<script type="text/javascript">
	
	$(document).ready(function(){
		// Scroll page to the bottom
		$('a.scrollToBottom').click(function(){
			
			$('html, body').animate({scrollTop: $(document).height()}, 'slow');
			
			return false;
		
		});	
		// Scroll page to the top
		$('a.scrollToTop').click(function(){
			
			$('html, body').animate({scrollTop:0}, 'slow');
			
			return false;
		
		});
	})
	</script>