ぺージ内ナビゲーションでスムーズスクロールで移動する時、一瞬移動先の画面が表示されその後スムーズスクロールされます。なぜ一瞬移動先の画面が表示されるのでしょうか?
HTMLで、a
タグにhref
属性の飛び先のid
名を指定しておきます。そしてクリックしたときにattr
メソッドでhref
属性の値を取得し、offset
メソッドでその要素の位置を取得しページ内でスムーズスクロールしています。
確実にスクロールしているのでコード自体に問題は無いと思いますが、一瞬移動先の画面が表示されるのが気になります。直し方を教えてください。
$(function () {
var $section = $('.nav-list').find('.list-item a');
$section.click(function(){
var id = $(this).attr('href');
var position = $(id).offset().top;
$('html,body').animate({
'scrollTop':position - 50
},1500);
});
var $sectionSticky = $('.sticky-header-nav-list').find('.sticky-header-list-item a');
$sectionSticky.click(function(){
var id = $(this).attr('href');
var position = $(id).offset().top;
$('html,body').animate({
'scrollTop':position - 50
},1500);
});
});
<header class="header">
<h1 class="title">xxx</h1>
<nav class="header-nav">
<ul class="nav-list">
<li class="list-item"><a href="#profile">プロフィール</a></li>
<li class="list-item"><a href="#skill">スキル</a></li>
</ul>
</nav>
</header>
<div class="clearfix">
<section 1 class="profile" id="profile">
<div class="heading-box">
<h1 class="heading">プロフィール<span></span></h1>
</div>
<div class="profile-box">
<div class="profile-contents">
<div class="profile-img-box">
<img class="profile-img" src="./img/IMG_0728.jpg" alt="profile.img">
<p>xxx</p>
</div>
</div>
</section 1>
<section 2 class="skill" id="skill">
<div class="heading-box">
<h1 class="heading">スキル<span></span></h1>
</div>
</section 2>
</div>
$(function () {
//ここからスムーススクロール//
var $section = $('.nav-list').find('.list-item a');
$section.click(function(){
var id = $(this).attr('href');
var position = $(id).offset().top;
$('html,body').animate({
'scrollTop':position - 50
},1500);
});
var $sectionSticky = $('.sticky-header-nav-list').find('.sticky-header-list-item a');
$sectionSticky.click(function(){
var id = $(this).attr('href');
var position = $(id).offset().top;
$('html,body').animate({
'scrollTop':position - 50
},1500);
});
//ここまでスムーススクロール//
});
@charset "UTF-8";
body{
box-sizing: border-box;
width: 100%;
font-size: 2px;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.header{
display: block;
width: 100%;
background-color:#8EB8FF;
padding-top:20px;
overflow: hidden;
}
header *{
color:#808080;
}
.title{
font-size: 1.8rem;
text-align: center;
}
.header-nav{
display: block;
width: 650px;
margin: 0 auto;
}
.nav-list{
display: inline-block;
}
.list-item{
float: left;
padding:30px;
font-size: 1.1rem;
}
.list-item a{
display:block;
width: 135%;
text-align: center;
}
.list-item a::after{
content: '';
display: block;
width: 0;
border-bottom: 1px solid #000;
margin: 0 auto;
transition: width 0.3s ease-in-out;
}
.list-item a:hover::after{
width: 100%;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.heading-box{
display: block;
text-align: center;
}
.heading{
display:inline-block;
font-size: 1.7rem;
font-family: BIZ UDP明朝;
font-weight: normal;
text-align: center;
padding: 50px 20px;
overflow: hidden;
}
.heading span{
background: url(../img/underline.png);
background-size: 100% 100%;
background-position:center;
display:inline-block;
height: 20px;
width: 120%;
position: relative;
left: -210px;
}
.profile{
display: block;
height: auto;
margin: 0 220px;
padding-bottom: 100px;
}
.profile-contents{
display: inline-block;
padding-left: 90px;
}
.profile-box{
display: block;
width: 85%;
height: auto;
margin: 0 auto;
}
.profile-img-box{
display: inline-block;
float: left;
text-align: center;
}
.profile-img{
display: inline-block;
width: 60%;
border-radius: 10px;
}
.profile-img-box p{
text-align: center;
font-size: 1rem;
margin-top: 10px;
}
.skill{
display: block;
height: auto;
padding: 50px 0 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title>notitle</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/main.css">
<link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">
</head>
<body>
<header class="header">
<h1 class="title">xxx</h1>
<nav class="header-nav">
<ul class="nav-list">
<li class="list-item"><a href="#profile">プロフィール</a></li>
<li class="list-item"><a href="#skill">スキル</a></li>
</ul>
</nav>
</header>
<div class="clearfix">
<section 1 class="profile" id="profile">
<div class="heading-box">
<h1 class="heading">プロフィール<span></span></h1>
</div>
<div class="profile-box">
<div class="profile-contents">
<div class="profile-img-box">
<img class="profile-img" src="./img/IMG_0728.jpg" alt="profile.img">
<p>xxx</p>
</div>
</div>
</section 1>
<section 2 class="skill" id="skill">
<div class="heading-box">
<h1 class="heading">スキル<span></span></h1>
</div>
</section 2>
</div>
<script src="./js/vendor/modernizr.custom.min.js"></script>
<script src="./js/vendor/jquery-1.10.2.min.js"></script>
<script src="./js/vendor/jquery.ba-throttle-debounce.min.js"></script>
<script src="./js/vendor/jquery.smooth-scroll.js"></script>
<script src="./js/main.js"></script>
</body>
</html>