ページ内リンクのクリックでカクつく

前提・実現したいこと

ヘッダーメニューにリンクを追加し、0.5秒かけてゆっくりスクロールされるよう設定しました。
しかし、クリックと同時に一瞬移動したい場所が表示され、トップに戻り、スクロールされるようになってしまいました。

エラーメッセージはありません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" type="text/css" href="style.css">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8</head>
9<body>
10  <header>
11    <div class="container">
12      <div class="header-right">
13        <a href="#lesson">レッスン</a>
14        <a>A</a>
15        <a>B</a>
16      </div>
17    </div>
18  </header>
19　<div class="gray"></div>
20  <div id="lesson" class="lesson"></div>
21<script src="script.js"></script>
22</body>
23</html>

css
1
2header {
3  height: 65px;
4  width: 100%;
5  background-color: rgba(34,49,52,0.9);
6  position :fixed;
7  top: 0;
8  z-index: 10;
9}
10
11.header-right {
12  float: right;
13  margin-right: -25px;
14}
15
16.header-right a {
17  line-height: 65px;
18  padding: 0 25px;
19  color: white;
20  display: block;
21  float: left;
22  transition: all 0.5s;
23}
24
25.gray {
26height: 800px;
27color: gray;
28}
29
30.lesson {
31height: 800px;
32color: green;
33}
34

jQuer
1
2  $('header a').click(function(){
3    var id = $(this).attr('href');
4    var position = $(id).offset().top;
5    $('html, body').animate({'scrollTop': position},500);
6  });
7

試したこと

.header-right aのtransitionを消してみましたが、解決できませんでした。

補足情報

足りない情報等ございましたら、教えて頂ければ幸いです。
追記致します。
よろしくお願いいたします。

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

回答1件

ベストアンサー

こんばんは。

このようにするとどうでしょうか？

js
1  $('header a').click(function(e){
2    e.preventDefault();
3    var id = $(this).attr('href');
4    var position = $(id).offset().top;
5    console.log(position);
6    $('html, body').animate({'scrollTop': position},500);
7  });