Saetl.net

Simple And Easy TempLate

Smooth Vertical or Horizonal Page Scrollongの使い方

  1. 下記ページの 「Download source」 よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(水平サンプルではindex.html)にコードを記述。
     ※ 垂直サンプルは index_vertical.html
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssファイルを読み込ませるためのコードを記述。
     ※ 水平(horizonal)サンプルの場合
    <head>
    <!--ダウンロードしたファイル-->
    <link rel="stylesheet" type="text/css" href="css/horizonal.css" />
    </head> 
    
     ※ 垂直(vertical)サンプルの場合
    <head>
    <!--ダウンロードしたファイル-->
    <link rel="stylesheet" type="text/css" href="css/vertical.css" />
    </head> 
    

    水平サンプルのhorizonal.cssコード(サンプルのcssは改変しています)

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    * {
    	margin:0;
    	padding:0;
    }
    
    body {
    	background:#000;
    	font-family:Arial;
    	width:12000px;
    	position:absolute;
    	top:0px;
    	left:0px;
    	bottom:0px;
    }
    
    a {
    	color: #fff;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #ffff00;
    	text-decoration: underline;
    }
    
    /*ここまでページ設定部分*/
    
    
    /*ここからSmooth Horizonal Page Scrollong(水平移動)の設定*/
    
    .content {
    	margin:0px;
    	bottom:0px;
    	width:4000px;
    	float:left;
    	height:100%;
    }
    
    .content h2 {
    	margin:50px 0 0 50px;
    	font-size: 2em;
    	color:#fff;
    }
    
    .content ul {
    	list-style:none;
    	margin-left:70px;
    }
    
    .content ul li {
    	float:left;
    	padding:5px;
    	margin:5px;
    	color:#ffff00;
    	font-size: 1.5em;
    }
    
    .content ul li a {
    	display:block;
    	color:#fff;
    }
    
    .content ul li a:hover {
    	text-decoration:none;
    	color:#f00;
    }
    
    #categories1 {
    	background-color: #933;
    	color:#fff;
    }
    
    #categories2 {
    	background-color: #009;
    	color:#fff;
    }
    
    #categories3 {
    	background-color: #369;
    	color:#fff;
    }
    

    垂直サンプルのvertical.cssコード(サンプルのcssは改変しています)

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	background: #000;
    	font-family: Arial;
    	width: 12000px;
    }
    a {
    	color: #fff;
    	text-decoration: none;
    }
    a:hover {
    	color: #ffff00;
    	text-decoration: underline;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからSmooth Horizonal Page Scrollong(水平移動)の設定*/
    
    .content {
    	margin: 0px;
    	height: 4000px;
    	width: 100%;
    	float: left;
    }
    .content h2 {
    	margin: 50px 0 0 50px;
    	font-size: 2em;
    	color: #fff;
    }
    .content ul {
    	list-style: none;
    	margin-left: 70px;
    }
    .content ul li {
    	float: left;
    	padding: 5px;
    	margin: 5px;
    	color: #ffff00;
    	font-size: 1.5em;
    }
    .content ul li a {
    	display: block;
    	color: #fff;
    }
    .content ul li a:hover {
    	text-decoration: none;
    	color: #f00;
    }
    #categories1 {
    	background-color: #933;
    	color: #fff;
    }
    #categories2 {
    	background-color: #009;
    	color: #fff;
    }
    #categories3 {
    	background-color: #369;
    	color: #fff;
    }
    
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。

     ※ index.html(水平サンプル)の場合
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <!--ダウンロードしたファイル-->
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
    <!--javascript追記-->
    <script type="text/javascript">
    	$(function() {
    		$('ul.nav a').bind('click',function(event){
    
    			var $anchor = $(this);
    			$('html, body').stop().animate({
    				scrollLeft: $($anchor.attr('href')).offset().left
    			}, 1000);
    			event.preventDefault();
    		});
    	});
    </script>
    </body> 
    
    
     ※ index_vertical.html(垂直サンプル)の場合
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <!--ダウンロードしたファイル-->
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
    <!--javascript追記-->
    <script type="text/javascript">
    	$(function() {
    		$('ul.nav a').bind('click',function(event){
    			var $anchor = $(this);
    			
    			$('html, body').stop().animate({
    				scrollTop: $($anchor.attr('href')).offset().top
    			}, 1500,'easeInOutExpo');
    			event.preventDefault();
    		});
    	});
    </script>
    </body> 
    
    
    ・<body></body>内にコードを記述。  ※ index.html(水平サンプル)、index_vertical.html(垂直サンプル)共通
    <div id="categories1" class="content">
    <h2>categories1</h2>
    <ul class="nav">
      <li>categories1</li>
      <li><a href="#categories2">categories2</a></li>
      <li><a href="#categories3">categories3</a></li>
    </ul>
    <!-- / #categories1 --></div>
    
    <div id="categories2" class="content">
    <h2>categories2</h2>
    <ul class="nav">
      <li><a href="#categories1">categories1</a></li>
      <li>categories2</li>
      <li><a href="#categories3">categories3</a></li>
    </ul>
    <!-- / #categories2 --></div>
    
    <div id="categories3" class="content">
    <h2>categories3</h2>
    <ul class="nav">
      <li><a href="#categories1">categories1</a></li>
      <li><a href="#categories2">categories2</a></li>
      <li>categories3</li>
    </ul>
    <!-- / #categories3 --></div>
    

    水平サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>Smooth Vertical or Horizonal Page Scrollong</title>
    <link rel="stylesheet" type="text/css" href="css/horizonal.css" />
    </head>
    
    <body>
    <div id="categories1" class="content">
      <h2>categories1</h2>
      <ul class="nav">
        <li>categories1</li>
        <li><a href="#categories2">categories2</a></li>
        <li><a href="#categories3">categories3</a></li>
      </ul>
      <!-- / #categories1 --></div>
    <div id="categories2" class="content">
      <h2>categories2</h2>
      <ul class="nav">
        <li><a href="#categories1">categories1</a></li>
        <li>categories2</li>
        <li><a href="#categories3">categories3</a></li>
      </ul>
      <!-- / #categories2 --></div>
    <div id="categories3" class="content">
      <h2>categories3</h2>
      <ul class="nav">
        <li><a href="#categories1">categories1</a></li>
        <li><a href="#categories2">categories2</a></li>
        <li>categories3</li>
      </ul>
      <!-- / #categories3 --></div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
    <script type="text/javascript">
    	$(function() {
    		$('ul.nav a').bind('click',function(event){
    			var $anchor = $(this);
    			$('html, body').stop().animate({
    				scrollLeft: $($anchor.attr('href')).offset().left
    			}, 1000);
    			event.preventDefault();
    		});
    	});
    </script>
    </body>
    </html>

    垂直サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>Smooth Vertical or Horizonal Page Scrollong</title>
    <link rel="stylesheet" type="text/css" href="css/vertical.css" />
    </head>
    
    <body>
    <div id="categories1" class="content">
      <h2>categories1</h2>
      <ul class="nav">
        <li>categories1</li>
        <li><a href="#categories2">categories2</a></li>
        <li><a href="#categories3">categories3</a></li>
      </ul>
      <!-- / #categories1 --></div>
    <div id="categories2" class="content">
      <h2>categories2</h2>
      <ul class="nav">
        <li><a href="#categories1">categories1</a></li>
        <li>categories2</li>
        <li><a href="#categories3">categories3</a></li>
      </ul>
      <!-- / #categories2 --></div>
    <div id="categories3" class="content">
      <h2>categories3</h2>
      <ul class="nav">
        <li><a href="#categories1">categories1</a></li>
        <li><a href="#categories2">categories2</a></li>
        <li>categories3</li>
      </ul>
      <!-- / #categories3 --></div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
    <script type="text/javascript">
    	$(function() {
    		$('ul.nav a').bind('click',function(event){
    			var $anchor = $(this);
    			
    			$('html, body').stop().animate({
    				scrollTop: $($anchor.attr('href')).offset().top
    			}, 1500,'easeInOutExpo');
    			event.preventDefault();
    		});
    	});
    </script>
    </body>
    </html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル