うーん・・・

スクロールして移動を1回で終了させる

解決済

質問者：kuroki55
質問日時：2017/07/05 04:53
回答数：3件

下記サイトを参考にさせていただき、目的のidの所にスクロールして移動できるようにしました。
しかし、移動後スクロールして再読込をすると元のidの所にスクロールしてしまいます。
スクロールして移動を1回のみにする方法は有りますでしょうか。
よろしくお願いいたします。
https://zxcvbnmnbvcxz.com/smoothscrol/

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3

回答者： t_fumiaki
回答日時：2017/07/06 07:06

参考にしたサイトで作ると、DEMOでid="white"をクリックしてwhiteのところへスクロール。

このページを再ロードすると、先頭には行かずに、whiteへスクロールした状態になってしまう。

これを、再読込したら、先頭からの表示にしたい。
と言う事ですか？

そうで有れば、通常のページ内リンクにして、ジャンプをスムーズにすれば良いと思います。

jQueryの読み込みはやってると思うから、そこは省略。

<body>


<script>
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度：自由に変更して下さい。
var speed = 1000; // ミリ秒
// アンカーの値取得
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>


<a href="#1">no1</a><br />
<a href="#2">no2</a><br />
<a href="#3">no3</a><br />
・
・
・

- 1
- 件

通報する

この回答へのお礼

t_fumiaki様
いつもいつも回答をいただきありがとうございます。
>// スムーススクロール
の所にヒントを得て問題を解決できました。
これからもよろしくお願いいたします。

通報する

お礼日時：2017/07/06 11:11

No.2ベストアンサー

回答者： fujillin
回答日時：2017/07/05 10:58

こんにちは

＞再読込をすると元のidの所にスクロールしてしまいます
再読み込みということは、ゼロから読み込んで新しく表示するのと同じことですので、onloadなどで設定しているスクリプトも当然ながら再実行されます。
ご質問は、これを防止したいという意味のことと思います。

一つの方法として、スクロールの実行情報（=済みか否か）を、ブラウザの表示期間のみの設定のcookieやwebStrageに記録する仕組みにしておいて、ロード時にこの情報を見て判断するようにするといったものが考えられます。
https://developer.mozilla.org/ja/docs/Web/API/Do …
https://developer.mozilla.org/ja/docs/Web/API/Wi …

以下はsessionStorageを利用した例です。
（ブラウザを閉じると記録も消えます）
例では、alert表示だけで実際のスクロールはしていませんが、「これからスクロールします」の表示の代わりにスクロール処理を行い、「スクロール済です」表示の際は何もしいようにすることで、ご質問の内容が実現できるのではないでしょうか？

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title></head>
<body>
<p>テストサンプル

<script type="text/javascript">
(function(){
var st = sessionStorage;
if(!st) return alert("Storage未対応ブラウザです");
if(!st.getItem("scroll")){
st.setItem("scroll", 1);
alert("これからスクロールします");
} else {
alert("スクロール済です");
}
})();
</script>
</body>
</html>