「Javascript」タグアーカイブ

Ajax他, CSS, スマホ・パソコン・Web関連

リンクに#を入れてクリックしたら、なめらかにスクロールして移動させる方法

コメントする

コピペOK。これだけで#のリンクをクリックしたら自動でスクロール移動に。もちろんスマホ対応。

リンクをタップしたりクリックしたら、パッと切り替わるのではなく、にゅるーっと動いていく#リンクがある。これを導入する方法を紹介。

なめらかスクロールのデモページはこちら

 
 

用意するもの

・scroll.js
・jQueryファイル(HTMLで直接読み込むなら用意しなくてもいい)
 
 

HTMLへの記述方法

<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><!– scroll –>
<head>
<script type=”text/javascript” src=”js/scroll.js”></script><!– scroll –>
<head>

こんな感じで、jqueryとscroll.jsを読み込む。

あとはリンクで #xxx といつも通り記述するとなめらかにスクロールしていく。

まとめてダウンロードする場合はこちら
・scroll.zip
 
 

jsファイルの内容と簡単な解説

$(document).ready(function(){
$(‘a[href*=#]’).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $(‘[name=’ + this.hash.slice(1) +’]’);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’)
.animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});

上から順に、

a hrefの中に#を使っていた場合
そのハッシュ(#)をターゲットにして
なめらかにスクロールするアニメーションだよ

という意味。

.animate({scrollTop: targetOffset}, 1000);
ここの数字を大きくすればゆっくり動き、小さくすれば早く動く。
この例の1000だと、1000ミリ秒=1秒なので、1秒で目的地に到着する。

なめらかスクロールのデモページはこちら

Ajax他, CSS, スマホ・パソコン・Web関連

スクロールしたら途中から出てきて、スクロール戻すと消えるメニューを作る方法

コメントする

画面をスクロールしたらふわっと出てくるメニューを作る

 

スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

メニューと書いたが、メニューだけでなく、単純に画像を浮かび上がらせたりページの下までスクロールした時に「ページトップへ戻る」のリンクを出したりもできる。

 
 

用意するもの

・sudden.js
・sudden.css

sudden.js　の中身

$(function() {
var navBox = $(“#menu”);
navBox.hide();
var TargetPos = 100;
$(window).scroll( function() {
var ScrollPos = $(window).scrollTop();
if( ScrollPos > TargetPos ) {
navBox.fadeIn();
}
else {
navBox.fadeOut();
}
});
});

 

sudden.css　の中身

#menu {
z-index: 1000000;
width: 100%;
position: fixed;
display: none; /*最初は非表示に設定*/
top: 20px;
right: 0;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

絶対に必要なのが display:none; これで非表示にしておく必要がある。

それ以外は、場所や透過度、重なり順の設定などなので変更可。

 
 

HTMLの<head>と</head>の間で読み込む

<link rel=”stylesheet” type=”text/css” href=”css/sudden.css” /><!– menu途中で出てくる –>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><!– menu途中で出てくる –>
<script type=”text/javascript” src=”js/sudden.js”></script><!– menu途中で出てくる –>

先ほどの、sudden.cssとsudden.jsとjqueryを読み込む。

順番に注意。
 
 

フワッと表示させるHTMLのメニューの部分

<div id=”menu”>
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>
</div>

画像は準備すること。

div=”menu” の間の部分が全て最初見えず、スクロールでふわっと表示される。
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>
この部分は任意の内容に変更可能。

 
 

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

sudden.zip

 
スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

Ajax他, CSS, スマホ・パソコン・Web関連

メニュー画像オンマウスで、2段目が横並びになるメニューの作り方

コメントする

CSS1個とjsファイル2個で作る簡単2段メニュー

 

2段メニューデモページ

 

色々な応用ができるが、今回は、1段目のメニューは画像、1段目にオンマウスで2段目がニョロリと表れて、文字でリンクが入れれるような形。

 
 

必要なもの

まとめてダウンロードしよう → accordionmenu.zip からダウンロード。

中身：

・accordion.css　← 背景色や1段目のメニューの横幅を変える時に編集する
・accordion.js
・jquery.min.js
・index.html ← 必要ソースは後述
・メニュー画像数個

 

上記個別ファイルは、ファイル名を変えて .txt にしているので、こちらから右クリックでダウンロード保存した場合などは、ファイル名や拡張子を .js や .css なども含めて上記の状態に戻すこと。

 
 

HTMLソースコード

 
まずは <head> ….. </head> の間で CSS と js ファイルを読み込む。

<link rel=”stylesheet” type=”text/css” href=”css/accordion.css” /><!– accordionmenu –>
<script type=”text/javascript” src=”js/jquery.min.js” ></script><!– accordionmenu –>
<script type=”text/javascript” src=”js/accordion.js”></script><!– accordionmenu –>

 
 

メニューを作りたい場所で、HTMLソースを書く。
2段メニューの文字やリンク先はここに記述。

メニュー画像の横幅や背景色を変えたい時は、 accordion.css を編集。

<div id=”gnav”>
<ul>
<li><a href=”index.html” class=”n01″><span>ホーム</span></a>
<div class=”gnavList”>
<ul>
<li><a href=”リンク先1.html”>2段メニュー1</a></li>
<li><a href=”リンク先2.html”>2段メニュー2</a></li>
</ul>
</div><!– gnavList –>
</li><!– ホーム –>
～～～～～～
以下同じ形でメニューが続いて
～～～～～～
</ul>
</div><!– gnav end –>

 
 

accordion.js、jquery.min.js、accordion.cssの3つと、メニュー画像、HTMLをサーバーにアップロード

FTPソフトを使って、ホームページ上にアップロードする。

　index.html
　jsフォルダ
　　accordion.js
　　jquery.min.js
　cssフォルダ
　　accordion.css
　imgフォルダ
　　メニュー画像など

パーミッションなどは関係ないので、644などでOK。

 

2段メニューデモページ