追随型メニュー+スムーススクロールの併用時における問題の解決例（制作会社/運営者向け）

少し前までは全面Flash構築サイトなんて当たり前のように見かけていたのですが、今は気づけばjQueryが用いられることが多くなってまいりました。最近のweb制作でも、「ここにこの動きをつけたいんだよね」なんて依頼が日常茶飯事であります。

jQueryの良いところはやっぱり更新のしやすさ。Flashでの作業過程を考えると、制作視点ではこれが一番大きいです。テキストのコピぺはもちろん容易ですし、ちゃんとSEO対応ができます。後はユーザー視点で待ち時間がほぼない、動作が軽い、iOSで閲覧可、ブックマークできる、などが挙げられます。

そこで今回は、最近携わった案件で発見した、色々と応用の効きそうなJSの小ネタを一つご紹介したいと思います。

スクロールに追随メニュー+アンカースクロール

ユーザーがサイトを閲覧する際、ウィンドウをスクロールさせるのに合わせてグローバルナビも同じ位置に固定させ、一緒に追随させるようなサイトが数年前から増え始めました。現在でもその機能を採用しているサイトは多く見られ、特にランディングページではよく使われているように思います。縦長で文章量が多いサイトでは便利ですよね。

また、それと併用して多く使われているのがアンカーリンクに対するページ内スクロールです。この機能はさらに多くのサイトが採用していますよね。もはや使っていないサイトはないのでは？と思うほどに…

ただ、これらを併用した際「ページ内スクロールをしたとき、止まってほしい位置に止まってくれない」ということ、ありませんか？

今回はこれらの機能を併用するとよく起きる問題に対しての解決例をご紹介します。

まず、上記で述べた問題の原因は「メニューの縦幅分が計算されていない」ことです。これにより、アンカーリンクでスクロールしてきたメニュ－が指定の位置で止まらず、コンテンツに被ってしまいます。

ここでスムーススクロールjQueryのソースの記述例をお見せします。

$(function(){
          $('a[href^=#]').click(function(){
                    var speed = 1800;
                    var href= $(this).attr("href");
                    var target = $(href == "#" || href == "" ? 'html' : href);

                    var position = target.offset().top;

                    $("html, body").animate({scrollTop:position}, speed, "swing");
                    return false;
          });
});

このソースの中でポジションの値を格納しているのが下記の部分！

$(function(){
          $('a[href^=#]').click(function(){
                    var speed = 1800;
                    var href= $(this).attr("href");
                    var target = $(href == "#" || href == "" ? 'html' : href);

          【ココ】→ var position = target.offset().top;

                    $("html, body").animate({scrollTop:position}, speed, "swing");
                    return false;
          });
});

要は、ここからメニュー分の縦幅分を差し引いて記述すれば良いわけです。仮にメニュ－の縦幅が200pxだった場合、上記の記述を下記のように修正します。

$(function(){
          $('a[href^=#]').click(function(){
                    var speed = 1800;
                    var href= $(this).attr("href");
                    var target = $(href == "#" || href == "" ? 'html' : href);

          【ココ】→ var position = target.offset().top-200;

                    $("html, body").animate({scrollTop:position}, speed, "swing");
                    return false;
          });
});

target.offset().topに-200を追加してあげるだけ！いざクリックしてみると指定の位置でちゃんと停止するので見ていて気持ちよいですね！

私もまだまだ勉強中の身ではありますが、jQueryは本当に色々なことができて便利で面白いです。

「システムに業務を合わせる」妥協は終わりにしませんか。複雑な要件も100%叶える、ベンダー依存のない自社専用EC基盤を。
自社要件を相談する

最後に

皆さんも色々なプラグインをちょっとしたカスタマイズで便利に使っていきましょう！