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等表示させたくないのですが
その場合はどのような記述をすれば良いのでしょうか。
どうか知恵を貸して下さい。よろしくお願いします。

回答No.2

sanzero · ベストアンサー

#1さんの回答にもありますが、いったんsessionStorageに保存して
遷移先でその値を取得しスクロールさせます。

//遷移元のjavascript
jQuery(function($){
$('a[href^=#]').click(function() {
// アンカーの値取得
var href= $(this).attr("href");
smoothScroll(href);
return false;
});

$('a:not([href^=#])').click(function(e) {
//通常の動作をストップ
e.preventDefault();

// アンカーの値取得
var href = $(this).attr("href");
var tmp = href.split("#");
var url = tmp[0];
var hash = "#" + tmp[1];
//アンカーリンクを一時保存
sessionStorage.setItem("hash", hash);
//遷移
location.href = url;

});

});
function smoothScroll(href){
var speed = 400;//スクロール速度（ミリ秒）
var target = $(href == "#" || href == "" ? 'html' : href);//移動先オブジェクト
console.log(target);
var position = target.offset().top;//移動先のY座標
/* スムーススクロール */
//$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
var body = 'body';
if (navigator.userAgent.match(/MSIE/)) {
/*IE6.7.8.9.10*/
body = 'html';
}
$(body).animate({scrollTop:position}, speed, 'swing');
return false;
}

//遷移先
jQuery(function($){
var hash = sessionStorage.getItem("hash");
if(hash){
sessionStorage.removeItem("hash");
smoothScroll(hash);
}

});

function smoothScroll(href){
var speed = 400;//スクロール速度（ミリ秒）
var target = $(href == "#" || href == "" ? 'html' : href);//移動先オブジェクト

var position = target.offset().top;//移動先のY座標
/* スムーススクロール */
//$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
var body = 'body';
if (navigator.userAgent.match(/MSIE/)) {
/*IE6.7.8.9.10*/
body = 'html';
}
$(body).animate({scrollTop:position}, speed, 'swing');
return false;
}

お礼

物の考えから実際のコードまで示して頂いて感謝の言葉もありません。
流用させて頂いた所、して欲しいと思った動きをそのまま再現してくれました。
もっと勉強しコードを理解できるよう努めます。本当にありがとうございます。

回答No.1

Taiyonoshizuku

別ページの#xxxを消しちゃったら、その別ページで表示する際にどこだかわからなくなっちゃうからね。
ぱっと思いつくのは別ページのリンクだったらクッキーかなんかに選択された#xxxを保存して、
別ページでクッキーから#xxxを取得して、そこまでスクロールさせる動きかな？

お礼

＞別ページの#xxxを消しちゃったら、その別ページで表示する際にどこだかわからなくなっちゃうからね。
その考え方はありませんでした。
外ページに移動する際の参考サイトが中々見つからなくて苦戦してます。