横にスクロールするサイトを作成しています。
横には動くのですが、マウスホイールでスクロールした際にURLにアンカーリンク(#hoge)がついてしまいます。
こちらを非表示にするにはどうしたら良いでしょうか?
###参考にしたサイト
http://webrocketsmagazine.com/entry/20111114/how-to-scroll-website-holizontal-width-jquery.html
マウスホイールでスクロールすると、各ページ単位で移動するようにしています。
javascript
1$(function() { 2 function scrollTo(to) { 3 $('html, body') 4 .stop() 5 .animate({ 6 scrollLeft: $(to).offset().left 7 }, 500, 'linear'); // jquery.easing.js などのプラグインを入れることでイージングを変更できます 8 } 9 $('.pager').bind('click',function(ev){ 10 scrollTo($(this).attr('href')); 11 }); 12 $('html').mousewheel(function(ev, mov) { 13 if ($('html, body').is(':animated')) { 14 return false; 15 } 16 var page = document.location.hash || '#page1'; 17 var target = null; 18 if (mov > 0) { 19 target = $(page).prev('.page').attr('id'); 20 } else if (mov < 0) { 21 target = $(page).next('.page').attr('id'); 22 } 23 if (target) { 24 scrollTo('#'+target); 25 document.location.hash = '#'+target; 26 } 27 ev.preventDefault(); // 縦スクロールはさせない 28 }); 29});
###作成したコード
javascript
1$(function() { 2 function scrollTo(to) { 3 $('html, body') 4 .stop() 5 .animate({ 6 scrollLeft: $(to).offset().left-100 7 }, 500, 'easeOutCirc'); // jquery.easing.js などのプラグインを入れることでイージングを変更できます 8 return false;//★追加★// 9 } 10 11 $('#navi a').bind('click',function(ev){ 12 scrollTo($(this).attr('href')); 13 return false;//★追加★// 14 }); 15 $('html').mousewheel(function(ev, mov) { 16 if ($('html, body').is(':animated')) { 17 return false; 18 } 19 var page = document.location.hash || '#page1'; 20 var target = null; 21 if (mov > 0) { 22 target = $(page).prev('.page').attr('id'); 23 } else if (mov < 0) { 24 target = $(page).next('.page').attr('id'); 25 } 26 27 if (target) { 28 scrollTo('#'+target); 29 document.location.hash = '#'+target; 30 return false;//★追加★// 31 } 32 ev.preventDefault(); // 縦スクロールはさせない 33 34 });
グローバルナビをクリックした時はアンカーを非表示にできたのですが
マウスホイールでスクロールするときは、各ページのアンカーリンクがURLに表示されてしまいます。
どのようにしたらアンカーを非表示にできるか、ご教示いただけますと助かります。
よろしくお願いします。
あなたの回答
tips
プレビュー