window.onload = function() {
$("#scroll-down").click(function() {
$('html, body').animate({
scrollTop: $('#portfolio-scroll').position().top
},1000);
});
};
body {
font-family: 'open sans', sans-serif;
}
.main {
height: 100vh;
width: 100%;
text-align: center;
vertical-align: center;
color: white;
display: table;
position: relative;
}
.wrepper {
display: table-cell;
vertical-align: middle;
}
.main-zona h1 {
padding: 0px;
margin: 0px;
font-weight: 300;
text-transform: uppercase;
}
.main-zona h2 {
font-weight: 300;
}
.main-zona {
position: relative;
}
.main-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.main-icon-down {
margin: 0 auto;
position: absolute;
left: 50%;
color: #fff;
bottom: 0;
margin-bottom: 20px;
border-radius: 50%;
width: 50px;
height: 50px;
border: 1px solid transparent;
margin-left: -25px;
line-height: 50px;
font-size: 20px;
border: 1px solid white;
transition: 0.5s;
}
body a:hover {
text-decoration: none;
}
.main-icon-down:hover {
color: #fff;
border: 1px solid #fff;
}
/*Portfolio*/
.portfolio {
text-align: center;
}
.container-header {
text-transform: uppercase;
text-align: center;
margin: auto;
font-size: 28px;
font-weight: 800;
padding: 100px 0 50px 0;
}
.portfolio-block img {
box-shadow: 0px 4px 29px 0px rgba(87, 92, 97, 0.54);
width: 100%;
max-width: 360px;
}
.portfolio a {
display: block;
font-size: 22px;
color: #333;
margin: 20px auto 50px;
width: 200px;
text-decoration: none;
border-bottom: 1px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test - Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/fontello.css">
<link rel="stylesheet" type="text/css" href="css/fontello-embedded.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="main parallax-window" data-parallax="scroll" data-image-src="img/main-bg.jpg">
<div class="main-overlay"></div>
<a href="https://andrii1202.github.io/index-en.html">
<div class="en-icon position"></div>
</a>
<a href="https://andrii1202.github.io/index.html">
<div class="ru-icon position"></div>
</a>
<a href="https://andrii1202.github.io/index-pl.html">
<div class="pl-icon position"></div>
</a>
<div class="wrepper">
<div class="main-zona">
<h1>Test Test Test</h1>
<div class="line"></div>
<h2>Test Test TestTest Test TestTest <br>Test TestTest Test Test</h2>
</div>
</div>
<a class="main-icon-down" id="scroll-down" href="#portfolio-scroll"><i class="icon-down"></i></a>
</div>
<div class="portfolio" id="portfolio-scroll">
<div class="container">
<h2 class="container-header">Portfolio</h2>
<div class="row">
<div class="col-sm-4 col-lg-4">
<div class="portfolio-block">
<img src="img/portfolio/1.jpg" alt="Work №1">
<a href="#">See the sample</a>
</div>
</div>
<div class="col-sm-4 col-lg-4">
<div class="portfolio-block">
<img src="img/portfolio/2.jpg" alt="Work №2">
<a href="#">See the sample</a>
</div>
</div>
<div class="col-sm-4 col-lg-4">
<div class="portfolio-block">
<img src="img/portfolio/3.jpg" alt="Work №3">
<a href="#">See the sample</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/scroll-down.js"></script>
</body>
</html>
Проблема в том, что при нажатии на кнопку, которая приводит в действие скролинг вниз (.main-icon-down
), по странице на долю секунды мигает и появляется блок (.portfolio
) к которому идет прокрутка, после чего он исчезает, а потом уже страничка плавно прокручивается вниз.
Помогите избавится от мигания при нажатия на кнопку. Не могу понять в чем проблема.