When navigating smoothly in the in-page navigation, the destination screen appears for a moment and then scrolls smoothly.Why does the destination screen appear for a moment?
In HTML, specify the id name of the href attribute in the a tag.When clicked, the attr method retrieves the value of the href attribute, the offset method retrieves the location of the element, and scrolls smoothly in the page.
I'm sure there's no problem with the code itself because I'm scrolling, but I'm worried that the screen of the destination will be displayed for a moment.Please tell me how to fix it.
$(function(){
var$section=$('.nav-list').find('.list-itema');
$section.click(function(){
variable = $(this).attr('href');
varposition=$(id).offset().top;
$('html, body').animate({
'scrollTop': position-50
},1500);
});
var$sectionSticky=$('.sticky-header-nav-list').find('.sticky-header-list-itema');
$sectionSticky.click(function(){
variable = $(this).attr('href');
varposition=$(id).offset().top;
$('html, body').animate({
'scrollTop': position-50
},1500);
});
});
<header class="header">
<h1class="title">xxx</h1>
<nav class="header-nav">
<ul class="nav-list">
<lic class="list-item"><a href="#profile">profile</a></li>
<lic class="list-item"><a href="#skill">skills</a></li>
</ul>
</nav>
</header>
<div class="clearfix">
<section1 class="profile" id="profile">
<div class="heading-box">
<h1class="heading">Profile>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>
<section2class="skill" id="skill">
<div class="heading-box">
<h1class="heading">skills<span>/span>/h1>
</div>
</section 2>
</div>
$(function(){
//Smooth scroll from here //
var$section=$('.nav-list').find('.list-itema');
$section.click(function(){
variable = $(this).attr('href');
varposition=$(id).offset().top;
$('html, body').animate({
'scrollTop': position-50
},1500);
});
var$sectionSticky=$('.sticky-header-nav-list').find('.sticky-header-list-itema');
$sectionSticky.click(function(){
variable = $(this).attr('href');
varposition=$(id).offset().top;
$('html, body').animate({
'scrollTop': position-50
},1500);
});
//Smooth scroll up to here //
});@charset "UTF-8";
body{
box-sizing: border-box;
width: 100%;
font-size: 2px;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
US>.header{
display:block;
width: 100%;
background-color:#8EB8FF;
padding-top —20px;
overflow — hidden;
}
header*{
color:#808080;
}
.title{
font-size: 1.8 rem;
text-align:center;
}
.header-nav{
display:block;
width —650px;
margin:0 auto;
}
.nav-list {
display:inline-block;
}
US>.list-item{
float:left;
padding —30px;
font-size: 1.1 rem;
}
US>.list-itema{
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.3ase-in-out;
}
.list-item a:hover::after{
width: 100%;
}
.clearfix::after{
content:';
display:block;
clear —both;
}
US>.heading-box{
display:block;
text-align:center;
}
.heading{
display:inline-block;
font-size: 1.7 rem;
font-family —BIZ UDP tomorrow morning;
font-weight:normal;
text-align:center;
padding —50px20px;
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:0220px;
padding-bottom —100px;
}
.profile-contents{
display:inline-block;
padding-left —90px;
}
US>.profile-box{
display:block;
width —85%;
height —auto;
margin:0 auto;
}
US>.profile-img-box{
display:inline-block;
float:left;
text-align:center;
}
.profile-img{
display:inline-block;
width: 60%;
border-radius —10px;
}
.profile-img-boxp{
text-align:center;
font-size:1rem;
margin-top —10px;
}
.skill{
display:block;
height —auto;
padding —50px0100px;
}<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>
<metacharset="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">
<h1class="title">xxx</h1>
<nav class="header-nav">
<ul class="nav-list">
<lic class="list-item"><a href="#profile">profile</a></li>
<lic class="list-item"><a href="#skill">skills</a></li>
</ul>
</nav>
</header>
<div class="clearfix">
<section1 class="profile" id="profile">
<div class="heading-box">
<h1class="heading">Profile>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>
<section2class="skill" id="skill">
<div class="heading-box">
<h1class="heading">skills<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>
Is it because the normal operation of tag a is activated that the screen of the destination is displayed for a moment?
You can disable normal behavior by writing return false; at the end of a click event.
hoge.click(function(){
Omitted.
return false;
});
© 2024 OneMinuteCode. All rights reserved.