お待たせしました！ 「れーとーびーむの作り方」実践編！ ……これまでの前座はなんだったのか。 今回は、「ページ内リンク」を瞬間移動ではなく、するするーっとスクロールするように改造しちゃおうのコーナー。 ついでに、ページ内リンクを踏んでもURLが変わらず、「戻る履歴」にも残らないようにしてしまう。 今回紹介する方法は、このブログでも使っているのだ。多少アレンジしてるけど。 jQueryを使ったJavaScriptでできるよ。 サンプル とりあえず、以下のページ内リンクを踏んでみな。 ※スムーズスクロールは負荷が高いので、スマホとかではカクついてスムーズにならない可能性大。 ※帰りは自分でスクロールしてくれ。 とりあえずソース 終わりに とりあえずソース jQueryを使ったスクリプトだから、しかるべき場所に書くように。 $(function() { $('a[href^="#"]:not([

$('a[href^="#"]').click(function(){ var speed = 800, href = $(this).attr("href"), target = $(href === "#" || href === "" ? 'html' : href), position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); 冒頭にやつがいますね。[^="#"]さん。正規表現的な何かなのでしょうか。 ちなみに、jQueryのバージョンによっては#を""で囲まないと動作しないことがあるそうなので、私は無難に"#"としています。 「 ^= 」の名前はビット排他的論理和演算子 「^=」の部分で検索すると、「ビット排他的論理

画面上をスクロールした際に、メインとなるナビゲーションを常に画面の一番上に表示される形をとりたい時の簡単な方法をご紹介します。常に他のページへのリンクが可能になるので便利ですが、あまり高さを取りすぎてしまうとコンテンツ部分が見える範囲が必然的に狭くなってしまうので、可視エリアを配慮しながら利用したほうがいいかもしれません。 まずは、サンプルをご確認ください。 DEMO ※スクロールすると画面の上部にメニューが固定表示されるかと思います。 それでは見ていきましょう。 1.HTMLを記述 サンプルとして、liタグで横幅25%に指定しfloatさせることで4つのメニューを配置。 <nav id="fixed-navi"> <ul> <li><a href="#">NAVI1</a></li> <li><a href="#">NAVI2</a></li> <li><a href="#">NAVI3

一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>