1

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&amp;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) к которому идет прокрутка, после чего он исчезает, а потом уже страничка плавно прокручивается вниз.

Помогите избавится от мигания при нажатия на кнопку. Не могу понять в чем проблема.

3 ответа 3

0

Припишите return false так якорь срабатывать не будет и мельканий тоже не будет.

window.onload = function() {
    $("#scroll-down").click(function() {
      $('html, body').animate({
          scrollTop: $('#portfolio-scroll').position().top
      },1000); 
      return false;
    });
};
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&amp;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>

0

При нажатии на кнопку происходит переход по якорю, а потом только обработка действий js.

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&amp;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="javascript:;"><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>

0

Можно заблокировать переход по якорю.

window.onload = function() {
    $("#scroll-down").click(function() {
      $('html, body').animate({
          scrollTop: $('#portfolio-scroll').position().top
      },1000);
      return false;
    });
};

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.