<概要>
ポートフォリオ用ページのスクロールアクションのコードを入れましたが、滑らかな挙動ではなく、所定の位置への瞬間移動になってしまいます。
<実装したいもの>
以下のサイトの目次クリック後のような挙動
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>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/07/08 05:12