プロが教える店舗＆オフィスのセキュリティ対策術

jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt

解決済

  • 質問者：hayosato
  • 質問日時：
  • 回答数：2件

jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a button type
の部分(ライン登録のボタン）クリックすると「お問い合わフォーム」と書いた部分に移動するようになっています。
きちんと起動しますが、問題は、一番下のフッター内の「プライバシーポリシー」という文字をクリックすると、
何故か、画面のTOPに移動してしまいます。この移動を解除したいです。どうしたら可能でしょうか？
しかも、フッター内の文字にカーソルを合わせると、cssのsss10の装飾効果が適応されず、
文字の色が青に変化して、下線も表示されてしまいます。☆cssのコードの続きは補足に追加してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" />
<title>a</title>
<!--スムーススクロール起動用bootstrapcdn＋jquery-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3 … integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://rensyuu12.tokyo/PHPMailer/jquery-3.6.0.m …

<style>
.auto-style1 {
text-align: center;
}
</style>
</head>
<body>

<div class="auto-style1">
<!--クリックしたらスムーススクロール開始a href="5"-->
<a button type="submit" id="submit" name="submit" class="auto-style4" href="#5">
<img src="25mouth.png" alt="確認画面へ" class="button-simple yureru-s example8" /></a>
</div>

<!--スムーススクロール到達点href="#index" id="5"-->
<div class="title5" href="#index" id="5">
<span>
※お問い合わフォーム
</span>
</div>

<form action="" method="post">
<div class="auto-style1">
<input type="text" class="name" name="name" id="name" value=""/>
</div>
</form>

<div class="center14">
<img src="45mouth.png" alt="［写真］" class="example0016">
</div>

<!--プライバシーポリシー-->
<footer>
<small><a href="" class="sss10"><span>プライバシーポリシー</span></a></small>
</footer>

<script>
//スムーススクロール用のコード
$(function(){
// #で始まるリンクをクリックした場合にスムーススクロール発動
$('a[href^="#"]').click(function() {
// スクロールの速度
let speed = 820;
// スクロールタイプ
let type = 'swing';
// href属性の取得
let href= $(this).attr("href");
// 移動先の取得（hrefが#indexならトップ$(html)に、）
let target = $(href == "#index" ? 'html' : href);
// 移動先のポジション取得
let position = target.offset().top;
// animateでスムーススクロール $('body,html').animate({scrollTop:position}, speed, type);
return false;
});
});
</script>
</body>
</html>

質問者からの補足コメント

  • .title5 {
    margin-top: 200px;
    }
    /* 画像の調節 */
    img.example0016{
    width: 64%;
    height: 400px;
    }
    .center14{
    text-align: center;
    }

    footer {
    padding-top: 2px;
    padding-bottom: 3px;
    background-color: rgb(7, 206, 0);
    color: white;
    font-size: 11px;
    width:100%;
    text-align: center;
    }
    /* リンクのスタイル */
    .sss10{
    text-decoration:none;/* 下線消去 */
    color: white;/* リンク色の変更　青から白 */
    }

      補足日時：2022/04/14 11:00
    通報する
通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



ざっとしか眺めていませんが・・・
ご提示のソースがそのままであるなら、はっきり言ってかなり重症です。
本来のHTMLやCSSの仕組みを理解しましょう。

＞文字の色が青に変化して、下線も表示されてしまいます。
リンク要素（<a>）には、通常ブラウザのデフォルトのスタイルが設定されています。
色以外にもアンダーラインの表示やカーソルを移動すると手のアイコン（=pointer）に変化するなどもその一つです。
「青色に変化する」のはそのスタイルが効いているからなので、変化させたくなければ、それらをキャンセルして新しい設定で上書きする必要があります。

:link（リンク要素）、 :visited（既訪のリンク）、 :hover（ホバー）、 :active（アクティブ）などがありますので、必要な内容を上記の順に設定してください。


＞クリックすると「お問い合わフォーム」と書いた部分に移動するようになっています。
ご提示のソースをそのままご利用なら、それはスクリプトによる動作ではなく、HTMLの動作です。
リンク要素のhref属性に#付きのリンク先を設定すると、それはページ内リンクを意味し、その先が表示される仕組みになっています。
（試しにご提示のスクリプトを削除するか、コメントアウト（/*　*/でくくる）してみても、同様の動作のままになると思います。）
現状では、クリックして移動したときにアドレスバーのURLの最後に「#5」と表示されていませんか？
表示されていれば、それはHTMLのもともとの機能で移動しているだけで、「スクロール」して移動はしていないはずと思いますが？

もしもそのままで良いのであれば、jQueryもスクリプトも不要です。
スクロール動作をさせたければ、きちんとjQueryを読み込んでください。


＞何故か、画面のTOPに移動してしまいます。
こちらも同様です、リンク要素をクリックしていることになるので、指定されたリンク先に遷移しています。
ご提示のソースではリンク先の記述がないので、ブラウザは「同じページ」と解釈し、再読み込みします。
この結果、ページの先頭に移動したように見えているのではないかとま推測します。
（アドレスバーを見ると、先ほどの「#5」は消えているはず）

「ライバシーポリシー」をクリックした際に、どうしたいのかがわかりませんが、何もしなくても良いのなら、リンク要素を外せば良いです。
（そうすれば、最初の「色が変わる」への対処も不要になります）
何かの反応をしたいのなら、そのように設定しておく必要があります。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます。フッターにリンクURLをきちんと入れたら普通に別ページに飛べました。
ありがとうございます

通報する
お礼日時：2022/04/14 16:09

No.1

  • 回答者： sukitaro
  • 回答日時：

<small><a href="" class="sss10"><span>プライバシーポリシー</span></a></small>



において、href=""が空文字になっていますので、urlを指定すると良いと思います。


CSSは、上から順番に適用していきますが、
より詳細な方を優先的に適用するルールになっています。

なので、.sss10だけ指定するのではなく、

small>a.sss10>span{
color: white;/* リンク色の変更　青から白 */
}

と、詳細にしていけば、適用されるかもしれません。

それでもダメな場合は、他のところでimportantが使われているかもしれませんから、探してみると良いかもしれません。

参考：
https://developer.mozilla.org/ja/docs/Web/CSS/Sp …
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます。無事解決できました。

通報する
お礼日時：2022/04/14 16:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報