The current article

4行でページトップまでスルスルスクロールを実装するjQuery

「ページトップへ」ボタンをクリックするとトップまでスクロールするjQueryをご紹介します。 ひとまずページの上までするスルッとスクロールさせたいんだよって時の選択肢の一つにいかがでしょうか。

pagetop

capture

説明

下記のJSを使用することで「btn_top」というクラス内のaタグ付きボタンをクリックすると作動します。

JS

$(function(){
	$(".btn_top").click(function () {
        $('html,body').animate({ scrollTop: 0 }, 'fast');
        return false;
    });
});

jquery本体と、
上記スクリプトをコピーして「pagetop.js」などというファイルを作成して読み込ませて下さい。
(head内に書く場合は<script type=”text/javascript”>と</script>で囲んで下さい)

設置方法に不安のある方は
初歩的なjQueryプラグインの設置方法内の
「プラグイン本体の設置」を参照ください。

HTML

HTMLは以下の様な感じです。
aタグ(リンク先は「#」)を「btn_top」で梱包してあげてください。

<div class="btn_top">
	<a href="#">
		<img src="画像" alt="ページトップへ">
	</a>
</div>

ページの上まで動くだけですが、使いやすいと思います
お試しください―


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。