別ページへのアンカーリンクについて

下記のように、別ページへのスムーススクロールのアンカーリンクを設定しています。

サイト構築先のサーバが重く、こちらは今回対処することができない状態です。
そのため、アンカー先のセクション、画像が読み込まれる前にリンクしてしまうため、飛び先がずれてしまいます。

こういった場合、javascriptで、ページのロードが終わってから、改めてアンカーに飛ばす」という処理は可能でしょうか。

ご教示いただけますと幸いです。
よろしくお願いいたします。

javascript
1$(function () {
2	$('.js-link[href^="#"]').click(function () {
3// e.preventDefault();
4		var headerHeight = $("#header").outerHeight();
5		var speed = 800;
6		var href = jQuery(this).attr("href");
7		var target = jQuery(href == "#" || href == "" ? 'html' : href);
8		var position = target.offset().top - headerHeight;
9		$('body,html').animate({scrollTop: position}, speed, 'swing');
10		return false;
11	});
12});
13

Lhankor_Mhy

2020/12/25 05:24

CSSでスムーススクロールをするのではダメでしたか？

i_masuda

2020/12/25 05:38 編集

ご確認いただきまして、ありがとうございます。 Safariが、対応ブラウザに含まれており、CSSでスムーススクロールが非対応のため今回利用することができずにおります。せっかくアドバイスいただいているのにかかわらず申し訳ありません。ありがとうございます！

行動規範の内容に同意します

回答1件

コードを見たところjQueryを使っているようなので、jQueryでの書き方になりますが、
以下のようにしたらできないですか？

javascript
1$(window).load(function () {
2    // 実行したい処理
3});

投稿2020/12/25 07:14

moromon

総合スコア86

i_masuda

2020/12/25 07:55

ご確認いただきましてありがとうございます。ご教示いただいた記述を使用すると、例えば、 index.html内の「ボタンA」をクリックし、 about.html内の「セクションB」へ遷移する際に about.html　のページが読み込み終わってから、「セクションB」へ遷移する挙動になるということでしょうか。知識があまりなく恐縮ですがよろしければご確認頂けますと幸いです。よろしくお願いいたします。