質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

302閲覧

【HTML・CSS】ポートフォリオ用サイトのスクロールアクションがうまくいかない

RaiseSkill

総合スコア50

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/07/08 03:56

<概要>
ポートフォリオ用ページのスクロールアクションのコードを入れましたが、滑らかな挙動ではなく、所定の位置への瞬間移動になってしまいます。

<実装したいもの>
以下のサイトの目次クリック後のような挙動
https://prog-8.com/docs/html-env-win

以下のコードのどこに問題があるのがご教授いただければ幸いです。
よろしくお願い致します。

▶HTML

<head> <meta charset = "utf-8"> <meta name = "viewport" content = "width=device-width,initial-scale=1"> <title>Site X</title> <link rel = "stylesheet" href = "stylesheet.css"> <script type = "text/javascript" src = "js/jquery-3.6.0.min.js"> $(document).ready(function() { $('#top').on('click', function() { $(window).scrollTop($('#top').position().top); }); $('#topix1').on('click', function() { $(window).scrollTop($('#topix1').position().top); }); $('#topix2').on('click', function() { $(window).scrollTop($('#topix2').position().top); }); $('#topix3').on('click', function() { $(window).scrollTop($('#topix3').position().top); }); $('#topix4').on('click', function() { $(window).scrollTop($('#topix4').position().top); }); $('#topix5').on('click', function() { $(window).scrollTop($('#topix5').position().top); }); }); </script> </head> <body> <a id = "top"></a> <div class = "header"> <div class = "header-logo"> <h1><a href = "#top">Site X</a></h1> </div> <div class = "header-list"> <ul> <li><a href = "#top">TOP</a></li> <li><a href = "#topix1">TOPIX1</a></li> <li><a href = "#topix2">TOPIX2</a></li> <li><a href = "#topix3">TOPIX3</a></li> <li><a href = "#topix4">TOPIX4</a></li> <li><a href = "#topix5">TOPIX5</a></li> </ul> </div> </div> <div id = "topix1" class = "blank"></div> <!-- 中略 --> <div id = "topix2" class = "blank"></div> <!-- 中略 --> <div id = "topix3" class = "blank"></div> <!-- 中略 --> <div id = "topix4" class = "blank"></div> <!-- 中略 --> <div id = "topix5" class = "blank"></div> <!-- 中略 --> </body>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

やりたいことは、下記だと思います。
header-list 内の aリンクをクリックしたら、リンク先のid要素位置までスクロール。

header-list 内の aリンクのクリックイベントは
$('.header-list a').on('click', function() {

リンク先のid要素の位置は、
$($(this).attr('href')).position().top

スクロールをアニメーションさせるなら、animateメソッドを使うといいでしょう。

js

1$(document).ready(function() { 2 $('.header-list a').on('click', function() { 3 let pos = $($(this).attr('href')).position().top; 4 $('html, body').animate({scrollTop: pos}); 5 }); 6});

投稿2022/07/08 04:54

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

RaiseSkill

2022/07/08 05:12

@hatena19様 詳細なアドバイスをありがとうございます! animateメソッドがあるんですね! 早速試してみます。
guest

0

js

1$('#topix1').on('click', ...)

 このコードは、#topix1つまり<div id = "topix1" class = "blank"></div>がクリックされた時にイベントを処理するものだと思います。<a href = "#topix1">TOPIX1</a>がクリックされた時ではないと思います。

 これは想定と異なるのでは。


 また、return falseevent.preventDefault()などで通常のクリック処理をキャンセルしておいた方がいいかもしれません。

投稿2022/07/08 04:32

Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

RaiseSkill

2022/07/08 05:13

@Lhankor_Mhy様 確かにご指摘の通りだと思います。 何もないところをクリックしてくれと言っているようなものですね。 クリック処理のキャンセル方法まで教えて頂き、ありがとうございます! 非常に助かります。
RaiseSkill

2022/07/08 14:31

@Lhankor_Mhy様 これは効果絶大ですね! 特にsmoothの方は、当方が一番欲しかった機能です! 有益情報の提供に心から感謝申し上げます。
guest

0

自己解決

@hatena19様から頂いたクエリの情報と、@Lhankor_Mhy様から頂いたscroll-behavior両方で無事に動作確認しました!

詳細なアドバイスを頂きありがとうございました!

投稿2022/07/08 15:26

RaiseSkill

総合スコア50

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問