クリックするとするするとスクロールさせたい(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;
}

回答No.1

amanojaku1 · ベストアンサー

$('a[href^=#]').click(function() {
document.home.src="./img/Sunset.jpg"
// スクロールの速度
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;
});

↑実際に試してませんが、こんな感じで この関数の中に「document.home.src="./img/selectedHome.png"を入れてみるのはダメなんでしょうか？
しかし、最近の javascript は全然 訳の わからんレベルまで進化しているんですね(^_^;)

お礼

ありがとうございます。
おかげさまでうごきました。