jQueryでスムーススクロールを導入する方法とは？

前へ 次へ
このQ&Aのポイント
  • jQueryを使用してスムーススクロールを実装する方法について調べています。
  • 特定のアンカーリンクをクリックした際に、ページがスムーズにスクロールする機能を実装したいです。
  • 具体的なコードの中で、目的のスムーススクロールが実現されるための処理フローについて調べています。
回答を見る
  • ベストアンサー

jQueryで困っています。教えてください。

スムーススクロールを導入しようと、いろいろ調べて以下のものを参考にさせていただこうと考えています。どうゆう流れになっているのかを調べて分からないことがあったので投稿させていただきました。var target = jQuery(href == "#" || href == "" ? 'html' : href);この行の意味がわかりません。また、targetに何が代入されているのか分かりません。回答よろしくお願いします。 jQuery-------------------------------------------- //スムーズスクロール jQuery(function(){ // #で始まるアンカーをクリックした場合に処理 jQuery('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= jQuery(this).attr("href"); // 移動先を取得 var target = jQuery(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール jQuery('body,html').animate({scrollTop:position}, speed); return false; }); });

  • dkong
  • お礼率86% (170/197)

質問者が選んだベストアンサー

  • ベストアンサー
noname#212058
noname#212058
回答No.1

カッコの中身「href == "#" || href == "" ? 'html' : href 」は三項演算子と呼ばれる条件演算式です。 http://www.ajaxtower.jp/js/ope/index14.html 従って、「href == "#" || href == ""」が真の場合、'html' にマッチした要素（要は <html> 要素）の jQuery オブジェクトが target に入ります。偽の場合は、href 変数の中身にマッチした要素の jQuery オブジェクトが target に入ります。

dkong
質問者

お礼

ありがとうございます。解決することができました。また、よろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQuery .click()関数について

    お世話になります。 アンカーにリンクする際URLに#example等が付いてしまうのを回避する為調べた所 $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 400;// ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); と、大変参考になるJavaScriptコードがありました。 このコードをそのまま流用させて頂いた所ページ内リンクについては解決しましたが #から始まるアンカーのみのクリックイベントで記述されてますので 別ページのアンカーに対応できません。 （<a href="../test#example">とリンクを貼っています。） 別ページのアンカーも同じく#example等表示させたくないのですが その場合はどのような記述をすれば良いのでしょうか。 どうか知恵を貸して下さい。よろしくお願いします。

  • jqueryの$()について

    貴重な場を借りて質問させていただきます。下記のコードはページ内リンクをさせるコードなのですが、※他のサイトからコピペしてます。 2点ほどお聞きしたいことがあります。 一点目はfunction()の()内に＄をいれているのはなぜでしょうか。私が書く際にはつけたことがなくて気になりました。 二点目は、targetという変数を作りったのにも関わらず、それをまた$()内 にいれ、$(target)としている理由がわからず、おしえていただけませんでしょうか。 jQuery(document).ready(function($) { $('a[href^=#]').click(function() { if ($(this).hasClass('scroller')) { var target = $(this).attr('href'); if (target != '#') { target = $(target).offset().top; $('html,body').animate({ scrollTop:target },1500,'quart'); } else { $('html,body').animate({ scrollTop:0 },1500,'quart');

  • JavaScriptのプログラムについて

    $(function(){ $("#top a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#question a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q001 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q002 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q003 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q004 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) }); ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTMLは少し分かりますが JavaScriptがまったく分からない素人です。 ネットで調べて上記のようにプログラムし ページ内リンクを流れるようにスクロールさせることは出来ました。 まずこのプログラムの書き方で合っていますでしょうか？ また、同じ記述が繰り返されているので短くしてやろうと自分なりに $("#q001 a") $("#q002 a") $("#q003 a") $("#q004 a") $("#q005 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) ↑のような全くの当て推量の書き方をしてみましたが動作しませんでした。 省略したり短く出来る余地があればそれも教えていただきたいです。 分かる方がおられましたらお願いします。

  • クリックするとするするとスクロールさせたい(JS)

    Javascript勉強中です。 画像のリンクをクリックすると、同一ページ内の任意の場所までするすると、 スクロールするような機能を作成したいのです。 現状、通常のaタグでくくったリンクであれば、実現できています。 ■HTML <a href="#top"><div><img src="./img/naviHome.png" name="home"></div></a> <a href="#recruit"><div><img src="./img/naviRecruit.png" name="recruit"></div></a> <a href="#priceList"><div><img src="./img/naviPriceList.png" name="priceList"></div></a> ■javascript <script type="text/javascript"> <!-- //aリンクをクリックすると、同一ページ内の任意のnameタグまでするするとスクロールする $('a[href^=#]').click(function() { // スクロールの速度 var speed = 800; // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); --> </script> ここから、画像が選択されたことを示すために色をかえた画像に切り替えたいため、 下記のJavascriptを実行させたいのです。 //選択されたことを明示するため画像をいれかえる// document.home.src="./img/selectedHome.png" aリンクをなくして、以下のようにしてしまうと、「$('a[href^=#]').click(function() 」が動作しません。 うまく、するするとスクロールさせながら、画像を入れ替える処理ができないものでしょうか？ <a href="javascript: fncNaviLink('#top');"><div><img src="./img/naviHome.png" name="home"></div></a> function fncNaviLink(link) { document.home.src="./img/selectedHome.png" location.href = link; }

  • jqueryでscrollTopの値をとりたい

    貴重な場をお借りして、ぜひとも教えていただきたいことがございます。 今、スクロールをすると要素がフェイドインするようなjqueryを書いています。 下記をご覧ください。 $(window).on("scroll", function(){}の中に入っているscrollTop,scrollVolを このfunctionの外でも使用したいのですが、方法はございますでしょうか。 つまり、if文のscrollVolに値を入れたいのですがunderfindとなってしまいます。 $(window).on("scroll", function(){}の中でif文を実行すれば取得はもちろんできるのですが、この外側で使用したい場合どうすればよろしいでしょうか。 お手数ですが、お力を貸していただけませんでしょうか。 よろしくお願いいたします。 function paralax(){ var target = $('#sec1'); var targetOffset = target.offset().top; target.css('display','none'); var scrollTop , windowHeight , scrollVol; windowHeight = $(window).height(); $(window).on("scroll", function(){ scrollTop = $(window).scrollTop(); scrollVol = scrollTop + windowHeight; }); if(targetOffset <= scrollVol){ target.fadeTo(400 , 1); } }

  • jqueryについて

    jqueryについて こんな内容のjqueryをひとつにまとめて、なおかつ01～99（実績数）までのidを割り振る設定したいのですが可能でしょうか？ 例えば $(function(){ $("#navi01-99 a").click(function(){ $("#main01-99 img").attr("src",$(this).attr("href")); return false; }); みたいな感じであとはidに番号を付ければいいみたいな・・・出来ませんでしょうか？ 用途は仕事の制作実績で使用したいのですが、どなたか教えていただけますでしょうか？ $(function(){ $("#navi01 a").click(function(){ $("#main01 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi02 a").click(function(){ $("#main02 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi03 a").click(function(){ $("#main03 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi04 a").click(function(){ $("#main04 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi05 a").click(function(){ $("#main05 img").attr("src",$(this).attr("href")); return false; }); });

    • ベストアンサー
    • AJAX
  • jquery 追従メニュー　IEについて

    下記jqueryを使って追従メニューを制作した時に、IEで確認すると限りなくスクロールできてしまいます。 解決する方法を検索しましたがわかりませんでした。 どなたかお分かりの方教えてください。 よろしくお願いします。 <script type="text/javascript"> $(function() { var offset = $("#leftcontent2").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#leftcontent2").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#leftcontent2").stop().animate({ marginTop: 0 }); } }); }); </script>

  • スムーズスクロールとfleXcrollの併用

    よろしくお願い致します。 jQueryを使用して、「overflow: auto」を指定している要素内でスムーズスクロール出来る方法を探しており、以下のようなコードを見つけました。 $(document).ready(function(){ var box = $('#contents'); $(document).click(function(event){ var obj = $(event.target); var anchor = obj.filter('a[href*="#"]'); if (!anchor[0]) anchor = obj.parents('a[href*="#"]'); if (anchor[0]){ var target = $(anchor[0].hash, box); if (target[0]){ var scrollTop = box.scrollTop(); var dist1 = box.prop('scrollHeight') - box.prop('clientHeight') - scrollTop; var dist2 = target.position().top - box.position().top; box.animate({ scrollTop: scrollTop + Math.min(dist1, dist2)}); return false; } } return true; }); }); ↑このコードで「overflow:auto;」を指定している要素内でスムーズスクロールが出来るようになったのですが、スクロールバーを装飾できる「fleXcroll（http://shanabrian.com/web/library/flexcroll.php）」プラグインと併用すると、スムーズスクロールが効かなくなってしまいます。 「fleXcroll」のコードは「http://www.hesido.com/web/flexcroll.js」になる（記述が長くここには書ききれませんでした）のですが、薄識のため何処に問題があるのか分からない状態です。 ちなみにHTMLは、下記のようなコードで使用しています。 <div id="navi"> 　<ul> 　　<li><a href="#A">divAへ移動</a></li> 　　<li><a href="#B">divBへ移動</a></li> 　　<li><a href="#C">divCへ移動</a></li> 　　<li><a href="#D">divDへ移動</a></li> 　　<li><a href="#E">divEへ移動</a></li> 　</ul> </div> <div id="hoge" style="height:500px; overflow:auto;"> 　<div id="A">divAの内容</div> 　<div id="B">divBの内容</div> 　<div id="C">divCの内容</div> 　<div id="D">divDの内容</div> 　<div id="E">divEの内容</div> </div> 分かりにくい説明で恐れ入ります。 補足説明致しますので、お分かりになる方がいらっしゃいましたら、どうかご教授下さいますようお願い致します。

  • jqueryについて

    サムネイルをマウスオーバーすると#targetに拡大画像を表示するものなのですがマウスオーバーで 切り替わりマウスアウトで元に戻るとこまではいいのですがフェードが全く効きません。 いろいろ試したところ$(".thumbnail a img")に変えるとフェードはするのですが今度は画像が 切り変わらなくなってしまいす。両者実装するにはどのように書き換えればいいのでしょうか？ $(document).ready(function() { var originSrc = $("#target").attr("src"); $(".thumbnail a") .fadeTo(1,1) .hover( function() { var changeSrc = $(this).attr("href"); $("#target").attr("src", changeSrc); $(this).fadeTo(200, 0.5); }, function() { $("#target").attr("src", originSrc); $(this).fadeTo(500, 1); } ) });

  • jQUery：フェードアニメーションについて

    jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを 参考にしようとしています。皆様のお知恵をお貸しいただければ 幸いです。 http://jsdo.it/TFujinami/8EaB こちらのソースで、フェードアニメーションで メインイメージを変化させたいのですが、 どこを修正すればよいのでしょうか。 $(function(){ var slider_interval = 4000; var slider_now = 0; var slider_max = 0; var slider_mouseover = false; var slider_img_width = $("#slider").width(); var slider_href = new Array(); function sliderScroll(){ slider_now++; if (slider_now > slider_max){ slider_now = 0; } sliderAnimation(slider_now, 'slow'); } function sliderAnimation(index, speed){ $('#slider .gallery .inner').animate({'margin-left':index * -1 * slider_img_width + 'px'}, speed, function(){ $('#slider .thumbnail div').removeClass('now'); $('#slider .thumbnail div:eq(' + index + ')').addClass('now'); $('#slider .frame a').attr('href', slider_href[index]); }); } var sliderLoop = function(){ if (! slider_mouseover){ sliderScroll(); } slider_scroll_timer = setTimeout(sliderLoop, slider_interval); } $('#slider .thumbnail div').mouseover(function(ev){ slider_mouseover = true; slider_now = $(this).attr('data-sliderid') - 0; sliderAnimation(slider_now, 'fast'); }); $('#slider .thumbnail div').mouseout(function(ev){ slider_mouseover = false; }); $('#slider .gallery .inner div').each(function(){ $(this).css('margin-left', slider_max * slider_img_width + 'px'); $(this).css({'position':'absolute', 'margin-top':'0px'}); slider_href.push( $(this).find('a').attr('href') ); slider_max++; }); slider_max = 0; $('#slider .thumbnail div').each(function(){ $(this).attr('data-sliderid', slider_max); $(this).find('img').wrap( $('<a>').attr({'href':slider_href[slider_max], 'target':'flickr'}) ); slider_max++; }); slider_max--; $('#slider .frame img').wrap( $('<a>').attr('target', 'flickr') ); sliderAnimation(0, 'fast'); setTimeout(sliderLoop, slider_interval) }); 本来ならば作者様に質問する事がよいと思うのですが、 より多くの方からお知恵を拝借したいと考え、この場で質問 させていただきました。 何卒よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する