Hello! There is a problem with the smooth transition to the anchor link. The transition itself to the desired unit works, but there is no smoothness. Please help me find the error in the code. Anchor link - white circle under the name.
$(function() { var link = $('a[data-toggle="modal"]'); link.on('click', function(event) { var work = $(this).attr('data-work'); var modal = $('.modal'); modal.find('.modal-body').load(work + '.html'); }); }); body { font-family: 'Open Sans', sans-serif; } html { font-size: 10px; } a:active, a:visited, a:focus { text-decoration: none; outline: none; } .wrapper { display: table-cell; vertical-align: middle; } .main { position: relative; display: table; width: 100%; text-align: center; color: #fff; height: 100vh; background: #000 url(../img/main-bg.jpg) center center no-repeat; } .main-overlay { position: absolute; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .main h1 { margin-bottom: 1.4rem; font-weight: 300; text-transform: uppercase; font-size: 4.8rem; } .main p { font-size: 3rem; font-weight: 300; } .main-header { position: relative; z-index: 2; } .main-line { width: 200px; height: 1px; background-color: #fff; margin: 0 auto; } .main-down { position: absolute; color: #fff; z-index: 4; bottom: 2rem; display: inline-block; font-size: 2rem; width: 50px; height: 50px; border-radius: 50%; border: 1px solid transparent; line-height: 50px; left: 50%; margin-left: -25px; transition: 0.2s; border-color: #fff; } .main-down:hover { color: #fff; border-color: #fff; } /* Секция с портфолио */ .portfolio { padding: 10rem 0px; text-align: center; } .section-header { text-transform: uppercase; font-weight: 800; font-size: 3.6rem; margin-bottom: 5rem; } .portfolio img { width: 100%; max-width: 360px; box-shadow: 0px 4px 29px 0px rgba(87, 92, 97, 0.54); } .portfolio a { display: block; margin: 2rem auto 6rem; color: #333; width: 17rem; } .portfolio a:hover { text-decoration: none; } /* Секция - подвал (footer) */ .footer { background-color: #646464; color: #fff; text-align: center; padding: 3rem 0; } .footer strong { font-weight: 300; font-size: 2.4rem; } .social-links { margin-top: 1rem; } .social-links a { width: 5rem; height: 5rem; line-height: 5rem; display: inline-block; color: #fff; border: solid 1px #fff; border-radius: 50%; margin-left: 1rem; margin-right: 1rem; font-size: 2rem; transition: 0.2s; } .social-links a:hover { background-color: #fff; color: #646464; } .offer-btn { display: block; width: 80%; max-width: 200px; margin: 1rem auto; border: 1px solid #fff; padding-top: 1rem; padding-bottom: 1rem; color: #fff; border-radius: 100px; transition: 0.2s; } .offer-btn:hover { text-decoration: none; background-color: #fff; color: #646464; } .modal img { width: 100%; } .modal-title { font-weight: 800; font-size: 2rem; } .close { background-color: transparent; border: none; font-size: 2.5rem; position: absolute; right: 2rem; top: 1rem; } .modal-btn { display: inline-block; color: #333; border: 1px solid #333; padding: 10px 20px; border-radius: 5px; } .modal-btn:hover { background-color: #333; color: #fff; text-decoration: none; } @media (min-width: 0px) and (max-width: 767px) { html { font-size: 7px; } .footer strong { margin-top: 3rem 0 2rem; display: inline-block; } .social-links a { font-size: 2rem; } } @media (min-width: 768px) and (max-width: 991px) { .footer strong { margin-top: 3rem 0 2rem; display: inline-block; } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic" rel="stylesheet"> <div class="main"> <div class="main-overlay"></div> <div class="wrapper"> <div class="main-header"> <h1>Кази Рустамов</h1> <div class="main-line"></div> <p>Верстка на HTML и CSS <br> Разработка сайтов под ключ</p> </div> </div> <a class="main-down" href="#portfolio"><i class="icon-down"></i></a> </div> <div class="portfolio" id="portfolio"> <div class="container"> <h2 class="section-header">Портфолио</h2> <div class="row"> <div class="col-md-4"> <div class="portfolio-block"> <img src="img/portfolio/1.jpg" alt="Работа №1"> <a data-toggle="modal" data-work='work-1' href="#work">Смотреть работу</a> </div> </div> <div class="col-md-4"> <div class="portfolio-block"> <img src="img/portfolio/2.jpg" alt="Работа №2"> <a data-toggle="modal" data-work='work-2' href="#work">Смотреть работу</a> </div> </div> <div class="col-md-4"> <div class="portfolio-block"> <img src="img/portfolio/3.jpg" alt="Работа №3"> <a data-toggle="modal" data-work='work-3' href="#work">Смотреть работу</a> </div> </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-md-3"> <strong>Кази Рустамов</strong> <p>Разработка сайтов <br> под ключ</p> </div> <div class="col-md-6"> <strong>Подпишитесь</strong> <div class="social-links"> <a href="https://vk.com/rustamov_17" target="_blank"><i class="icon-vk"></i></a> <a href="https://instagram.com/rustamov_17" target="_blank"><i class="icon-instagram"></i></a> <a href="https://twitter.com/rustamov_17" target="_blank"><i class="icon-twitter"></i></a> </div> </div> <div class="col-md-3"> <strong>Напишите мне</strong> <a href="https://vk.me/rustamov_17" target="_blank" class="offer-btn">Заказать сайт</a> </div> </div> </div> </div> 
