【簡単】別ページのアンカーリンクでもスムーズスクロールさせる方法｜kasumiblog
ページ内アンカーリンクでスムーズスクロールを実装したが、別ページのアンカーリンクに飛んだ時も、スムーズスクロールさせたい！ このような疑問に回答します。 本記事では別ページでも、アンカーリンクへスムーズスクロールさせる方法について解説します。 script内に以下ソースを記述 $(function () { // 別ページの場合は以下 var urlHash = location.hash; if (urlHash) { $('body,html').stop().scrollTop(0); setTimeout(function(){ // ヘッダー固定の場合はヘッダーの高さを数値で入れる、固定でない場合は0 var headerHight = 0; var target = $(urlHash); var position = target.offset().top - headerH
ページ内リンクをスマートにするsmoothScroll.js[to-R]
ページ内リンクをスマートにするsmoothScroll.js ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。 どういったものかはサンプルで確認してください。 <a href="#header">ページの先頭に戻る</a> などのページ内リンクをスムーズな移動に変更します。 これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。 設置方法は簡単です。 smoothScroll.jsをダウンロードして、設置したいページで取りこみます。 <script type="text/javascript" src="./smoothScroll.js"></script> 特定のリンクはスムーズさせない smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#
![ページ内リンクをスマートにするsmoothScroll.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
こだわりのページ内リンクスムーズスクロール scrollsmoothly.js
「ページ内リンク スムーズスクロール」でググればいくらでも出てくるシロモノだけど、自分の要望をすべて満たすものが無かったので作ってみた。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js 動作サンプル 以下のソースコードをサンプルページのようにhead内で読み込むだけでOK。 ソースコード(Javascript) scrollsmoothly.js 読み込み例 <script type="text/javascript" src="scrollsmoothly.js"></script> 特徴 縦横斜めにスクロール可能 スクロール中にもリンクをクリック可能 別のページからのリンクでも指定の場所までスムーズスクロールします MIT License 動作確認ブラウザ IE6, IE7 Firefox 2,3 Opera 9.27 Safari 3.1 関連エントリ
ページ内スクロールのjQueryプラグインいろいろ
ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 個人的には特定のものしか使っておらず、いろいろと挑戦したいと考えているのでそのとき用にメモ。カルーセルとかギャラリーみたいなスライダータイプは今回割愛しています。 ScrollTo Posts With jQuery ページ内をダイナミックにスクロール。サイドのメニューっぽいところで操作します。 ScrollTo Posts With jQuery Create a Vertical, Horizontal and Diagonal Sliding Content Website with
jQueryでスムーススクロール [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
FireFoxのスクロールバー分のズレをとるCSS
FireFoxのスクロールバー分のズレをとるCSS 2006年9月26日 FireFoxで表示したときページが縦方向にきっちり収まっているとき、スクロールバーの分だけスクロール時で表示されている時と比べてズレてしまいます。 デザイン自体には問題はありませんが、コンテンツが縦にきっちり収まっているページからコンテンツの長いページにページ移動する際にカクっとズレの動きが生じてしまいます。 な～んか気持ち悪いなぁと思ったときは body { overflow-y:scroll; } とするとページ移動の際のズレの動きがなくなります。 しかし、ＩＥ6、IE7ではブラウザ自体のスクロールバーとは別にもうひとつ内側にスクロールバーができてしまいます。 そこで対処法としてＩＥ６用CSSハックの*htmlとＩＥ7用CSSハックの*+htmlを利用して *html body { /*IE6だけに適
RedLine Magazine : jQueryのスルスルスクロールを指定1つでバシバシ使う
jQueryのスルスルスクロールを指定1つでバシバシ使う このブログでも使っているjQueryを使ったスルスルーと動くスクロールなんですが、どこからどこへ移動したのかを目で追えるので分かりやすいし、動きも気持ちいいので大好きです。 多くの案件では1ページ内にページの先頭へ戻るアンカーリンクのみコレを利用してたんですが、この動きがクライアントに大好評のようでページ内の他のアンカーリンクでも使いたいという要望が増えてきました。今までこの動きの指定をJSで指定してたところに1つリンクが増える程度ならclassとリンク先だけ変更して同じ記述をコピーしちゃえばいいやってJSが分からない私の発想で乗り切ってたんですが、1ページ内に5個も6個も増えてくるとさすがに書くのが面倒というか、ほとんど同じ処理なのに重複した記述は要領悪いよなぁと思い始めまして・・・。 例えばリンクのページなんかでカテゴリが5個あ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヘッダを固定している時のページ内リンクのズレ補正 | Webとデザインのキタック