There is a page . When you click on the menu items, the page scrolls to the desired block. But scrolling is jerky. Why can this happen?

Js:

$(".scroll").click(function(event){ event.preventDefault(); var full_url = this.href; var parts = full_url.split("#"); var trgt = parts[1]; var target_offset = $("#"+trgt).offset(); var target_top = target_offset.top; $("html, body").animate({scrollTop:target_top}, 500); });
  • It is necessary to watch the script responsible for scrolling, it does not jerk constantly, periodically - Romanzhivo
  • Script added to question - Frontender
  • I had a similar problem, because of the layout curve, somewhere the tag forgot to close. - Marat Batalandabad
  • I'm fine with the layout. There are no errors, no warnings through the W3C validator. - Frontender
  • everything is fine with me, without twitching - user33274

2 answers 2

Perhaps jQ itself slows down, namely the method .animate (). Try to use the plugin AnchorScroller.js (unfortunately, I do not know who the author). I found it once in the network and slightly modified it, it seems to work more smoothly. To launch, it is enough to hang 2 attributes: 1) on the link to the data-anchor , 2) on the data-anchor-id , in your case

  <ul> <li><a href="#presentation" data-anchor>Презентация</a></li> <li><a href="#costing"data-anchor>Расчет стоимости</a></li> <li><a href="#request" data-anchor>Заявка</a></li> </ul> <section id="presentation" data-anchor-id></section> <section id="costing" data-anchor-id></section> <section id="request" data-anchor-id></section>

Update: although, perhaps, no more smoothly, but does not freeze, as when using .animate () Also noticed that smoothness depends on the viewing area, if you click "Run code" and do not deploy the example to full screen, it works smoothly, if To view the page in the expanded mode - begin to twitch. I suppose that this is due to the rendering features in browsers, and a large amount of markup can lead to a slowdown.

 //Плавный переход к якорю function anchorScroller(el, duration) { if (this.criticalSection) { return false; } if ((typeof el != 'object') || (typeof el.href != 'string')) return true; var address = el.href.split('#'); if (address.length < 2) return true; address = address[address.length-1]; el = 0; for (var i=0; i < jQuery('[data-anchor-id]').length; i++) { if (jQuery('[data-anchor-id]')[i].id == address) { el = jQuery('[data-anchor-id]')[i]; break; } } if (el === 0) return true; this.stopX = 0; this.stopY = 0; do { this.stopX += el.offsetLeft; this.stopY += el.offsetTop; } while (el = el.offsetParent); this.startX = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft; this.startY = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; this. stopX = this.stopX - this.startX; this.stopY = this.stopY - this.startY; if ( (this.stopX == 0) && (this.stopY == 0) ) return false; this.criticalSection = true; if (typeof duration == 'undefined') this.duration = 500; else this.duration = duration; var date = new Date(); this.start = date.getTime(); this.timer = setInterval(function () { var date = new Date(); var X = (date.getTime() - this.start) / this.duration; if (X > 1) X = 1; var Y = ((-Math.cos(X*Math.PI)/2) + 0.5); cX = Math.round(this.startX + this.stopX*Y); cY = Math.round(this.startY + this.stopY*Y); document.documentElement.scrollLeft = cX; document.documentElement.scrollTop = cY; document.body.scrollLeft = cX; document.body.scrollTop = cY; if (X == 1) { clearInterval( this.timer); this.criticalSection = false; } }, 0); return false; } jQuery(document).ready(function() { jQuery('body').on('click', '[data-anchor]', function() { return anchorScroller(this); }); }); 
 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* fonts */ @font-face { font-family: "PFDINTEXTCONDPRO-THIN"; src: url("../fonts/PFDINTEXTCONDPRO-THIN.eot"); src: url("../fonts/PFDINTEXTCONDPRO-THIN.eot?#iefix") format("embedded-opentype"), url("../fonts/PFDINTEXTCONDPRO-THIN.woff") format("woff"), url("../fonts/PFDINTEXTCONDPRO-THIN.ttf") format("truetype"), url("../fonts/PFDINTEXTCONDPRO-THIN.svg#PFDINTEXTCONDPRO-THIN") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "PFDINTEXTCONDPRO-LIGHT"; src: url("../fonts/PFDINTEXTCONDPRO-LIGHT.eot"); src: url("../fonts/PFDINTEXTCONDPRO-LIGHT.eot?#iefix") format("embedded-opentype"), url("../fonts/PFDINTEXTCONDPRO-LIGHT.woff") format("woff"), url("../fonts/PFDINTEXTCONDPRO-LIGHT.ttf") format("truetype"), url("../fonts/PFDINTEXTCONDPRO-LIGHT.svg#PFDINTEXTCONDPRO-LIGHT") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "PFDINTEXTCONDPRO-REGULAR"; src: url("../fonts/PFDINTEXTCONDPRO-REGULAR.eot"); src: url("../fonts/PFDINTEXTCONDPRO-REGULAR.eot?#iefix") format("embedded-opentype"), url("../fonts/PFDINTEXTCONDPRO-REGULAR.woff") format("woff"), url("../fonts/PFDINTEXTCONDPRO-REGULAR.ttf") format("truetype"), url("../fonts/PFDINTEXTCONDPRO-REGULAR.svg#PFDINTEXTCONDPRO-REGULAR") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "PFDINTEXTCONDPRO-MEDIUM"; src: url("../fonts/PFDINTEXTCONDPRO-MEDIUM.eot"); src: url("../fonts/PFDINTEXTCONDPRO-MEDIUM.eot?#iefix") format("embedded-opentype"), url("../fonts/PFDINTEXTCONDPRO-MEDIUM.woff") format("woff"), url("../fonts/PFDINTEXTCONDPRO-MEDIUM.ttf") format("truetype"), url("../fonts/PFDINTEXTCONDPRO-MEDIUM.svg#PFDINTEXTCONDPRO-MEDIUM") format("svg"); font-weight: normal; font-style: normal; } /* page */ body { min-width: 1170px; background: #fff; color: #4e4a52; } .wrapper { margin: 0 auto; width: 1150px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* header */ header { height: 165px; background: url(../images/logo.png) center 20px no-repeat; } header .wrapper { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 67px 10px 0 10px; width: 100%; max-width: 1240px; min-width: 1150px; font-family: "PFDINTEXTCONDPRO-MEDIUM"; } header nav { float: left; margin: 2px 0 0 0; font-size: 18px; text-transform: uppercase; } header nav li { float: left; margin: 0 37px 0 0; } header nav a { color: #ada6b3; text-decoration: none; outline: none; } header nav a:hover { color: #4e4a52; } header .phone { float: right; font-size: 20px; color: #89729e; } /* presentation */ #presentation { margin: 0 auto; min-width: 1170px; max-width: 1920px; height: 697px; background: url(../images/presentation_background.jpg) center no-repeat #e2eaf2; } #presentation .wrapper { padding: 168px 0 0 0; } #presentation h1 { font-family: "PFDINTEXTCONDPRO-THIN"; font-size: 56px; line-height: 67px; text-align: center; } #presentation .button { display: block; margin: 50px auto 0 auto; width: 323px; height: 80px; border: 1px solid #89729e; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; font-family: "PFDINTEXTCONDPRO-REGULAR"; font-size: 28px; line-height: 76px; color: #89729e; text-decoration: none; text-align: center; outline: none; } #presentation .button:hover { background: rgba(255,255,255,0.15); } /* costing */ #costing .wrapper { padding: 70px 0 0 0; } #costing h2 { font-family: "PFDINTEXTCONDPRO-LIGHT"; font-size: 36px; text-align: center; } #costing p { margin: 10px 0 70px 0; font-family: "PFDINTEXTCONDPRO-THIN"; font-size: 24px; text-align: center; } #costing .sliders { float: left; margin: 0 0 80px 0; width: 880px; height: 250px; } #costing .item { height: 47px; } #costing .item.groups { margin: 54px 0 55px 0; } #costing .item p { float: left; margin: 0; width: 220px; height: 47px; font-family: "PFDINTEXTCONDPRO-REGULAR"; font-size: 26px; line-height: 47px; text-align: left; } #costing .slider { float: left; width: 480px; height: 10px; } #costing input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; float: left; margin: 0 0 0 45px; padding: 0 10px; width: 47px; height: 47px; border: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #f9f8fa; -webkit-box-shadow: 1px 1px 0 0 #e4e3e5 inset; -moz-box-shadow: 1px 1px 0 0 #e4e3e5 inset; box-shadow: 1px 1px 0 0 #e4e3e5 inset; outline: none; font-family: "PFDINTEXTCONDPRO-REGULAR"; font-size: 20px; color: #4e4a52; text-align: center; } #costing .arrows { float: left; margin: 0 0 0 12px; padding: 5px 0; width: 19px; height: 37px; } #costing .arrows .arrow_up { margin: 0 0 15px 0; width: 19px; height: 11px; background: url(../images/arrows.png) left top no-repeat; cursor: pointer; } #costing .arrows .arrow_up:hover { background: url(../images/arrows.png) right top no-repeat; } #costing .arrows .arrow_down { width: 19px; height: 11px; background: url(../images/arrows.png) left bottom no-repeat; cursor: pointer; } #costing .arrows .arrow_down:hover { background: url(../images/arrows.png) right bottom no-repeat; } #costing .profit { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; margin: 0 0 80px 0; padding: 40px 0 0 0; width: 270px; height: 250px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #f9f8fa; } #costing .profit .title { margin: 0 0 42px 0; font-family: "PFDINTEXTCONDPRO-REGULAR"; font-size: 30px; } #costing .profit .value { margin: 0; font-family: "PFDINTEXTCONDPRO-REGULAR"; font-size: 72px; color: #e78e92; } #costing .profit .currency { margin: 0; font-family: "PFDINTEXTCONDPRO-REGULAR"; font-size: 24px; color: #e78e92; } #costing .button { clear: both; display: block; width: 260px; height: 60px; margin: 0 auto 75px auto; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: #e78e92; outline: none; font-family: "PFDINTEXTCONDPRO-REGULAR"; font-size: 26px; line-height: 56px; color: #fff; text-decoration: none; text-align: center; } #costing .button:hover { background: #e37b80; } /* request */ #request { margin: 0 auto; min-width: 1170px; max-width: 1920px; height: 764px; background: url(../images/request_background.jpg) center no-repeat #e3b59e; position: relative; } #request .wrapper { padding: 70px 0 0 0; } #request h2 { font-family: "PFDINTEXTCONDPRO-LIGHT"; font-size: 36px; text-align: center; } #request .form_box { width: 516px; height: 575px; -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; background: rgba(255,255,255,0.5); position: absolute; left: 50%; margin-left: -258px; bottom: 0; } #request form { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 30px 40px 0 40px; width: 516px; height: 575px; } #request form .input_box { position: relative; } #request form .input_box label { height: 46px; font-family: "PFDINTEXTCONDPRO-THIN"; font-size: 18px; line-height: 46px; color: #d86782; cursor: text; position: absolute; right: 18px; bottom: 0; } #request form .input_title { font-family: "PFDINTEXTCONDPRO-REGULAR"; font-size: 18px; color: #8e8a91; } #request form input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; margin: 6px 0 25px 0; padding: 0 19px; width: 436px; height: 46px; border: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #fff; -webkit-box-shadow: 1px 1px 0 0 #e9e9ea inset; -moz-box-shadow: 1px 1px 0 0 #e9e9ea inset; box-shadow: 1px 1px 0 0 #e9e9ea inset; outline: none; font-family: "PFDINTEXTCONDPRO-REGULAR"; font-size: 18px; color: #4e4a52; } #request form input:focus { padding: 0 18px; border: 1px solid #dbd6e0; -webkit-box-shadow: 1px 1px 0 0 #e9e9ea inset; -moz-box-shadow: 1px 1px 0 0 #e9e9ea inset; box-shadow: 1px 1px 0 0 #e9e9ea inset; } #request form input[name="email"] { margin: 6px 0 0 0; } #request form input.error { border: 1px solid #e78e92; } #request form .text { margin: 15px 0 30px 0; font-family: "PFDINTEXTCONDPRO-LIGHT"; font-size: 14px; color: #d86782; text-align: center; } #request form button { display: block; width: 220px; height: 60px; margin: 0 auto; padding: 0 0 5px 0; border: none; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: #e78e92; outline: none; cursor: pointer; font-family: "PFDINTEXTCONDPRO-REGULAR"; font-size: 26px; color: #fff; } #request form button:hover { background: #e37b80; } #request .form_box .success { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 230px 0 0 0; width: 516px; height: 575px; display: none; } #request .form_box .success p { font-family: "PFDINTEXTCONDPRO-THIN"; font-size: 36px; line-height: 48px; text-align: center; } #request .form_box .success span { font-family: "PFDINTEXTCONDPRO-LIGHT"; font-size: 24px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <!-- header --> <header> <div class="wrapper"> <nav> <ul> <li><a href="#presentation" data-anchor>Презентация</a></li> <li><a href="#costing"data-anchor>Расчет стоимости</a></li> <li><a href="#request" data-anchor>Заявка</a></li> </ul> </nav> <div class="phone">8 812 603-42-42</div> </div> </header> <!-- /header --> <!-- presentation --> <section id="presentation" data-anchor-id> <div class="wrapper"> <h1>Франшиза детской<br>хореографической школы<br>«Русский балет»</h1> <a href="http://franshiza-futbolnogo-kluba.ru/Content/documents/junior-franchise.pdf" target="_blank" class="button">Открыть презентацию</a> </div> </section> <!-- /presentation --> <!-- costing --> <section id="costing" data-anchor-id> <div class="wrapper"> <h2>Рассчитайте прибыльность вашей школы</h2> <p>В расчет включены затраты на зарплату хореографов, аренду зала, рекламу, роялти и налоги</p> <div class="sliders"> <!-- pupils --> <div class="item pupils clearfix"> <p>Количество учениц</p> <div class="slider pupils_slider"></div> <input type="text" name="pupils" value="0"> <div class="arrows"> <div class="arrow_up"></div> <div class="arrow_down"></div> </div> </div> <!-- /pupils --> <!-- groups --> <div class="item groups clearfix"> <p>Количество групп</p> <div class="slider groups_slider"></div> <input type="text" name="groups" value="0"> <div class="arrows"> <div class="arrow_up"></div> <div class="arrow_down"></div> </div> </div> <!-- /groups --> <!-- schools --> <div class="item schools clearfix"> <p>Количество школ</p> <div class="slider schools_slider"></div> <input type="text" name="schools" value="0"> <div class="arrows"> <div class="arrow_up"></div> <div class="arrow_down"></div> </div> </div> <!-- /schools --> </div> <!-- profit --> <div class="profit"> <p class="title">Ваша прибыль</p> <p class="value">0</p> <p class="currency">рублей</p> </div> <!-- /profit --> <a href="#" class="button">Заполнить анкету</a> </div> </section> <!-- /costing --> <!-- request --> <section id="request" data-anchor-id> <div class="wrapper"> <h2>Оставьте заявку, и мы свяжемся с вами</h2> <div class="form_box"> <!-- form --> <form action="php/send.php" method="post" novalidate="novalidate"> <div class="input_box"> <p class="input_title">Имя</p> <input type="text" name="name" id="name"> </div> <div class="input_box"> <p class="input_title">Телефон</p> <input type="text" name="phone" id="phone"> </div> <div class="input_box"> <p class="input_title">Город проживания</p> <input type="text" name="city" id="city"> </div> <div class="input_box"> <p class="input_title">E-mail</p> <input type="text" name="email" id="email"> </div> <p class="text">Все поля обязательны для заполнения</p> <button>Отправить</button> </form> <!-- /form --> <!-- success --> <div class="success"> <p>Спасибо. Заявка отправлена.<br> <span>Мы скоро свяжемся с вами</span></p> </div> <!-- /success --> </div> </div> </section> </body>

https://jsfiddle.net/Romanzhivo/06Lk3bc3/

  • Thanks for the detailed comment! - Frontender
  • @ Viktor Pavlov, please, but, as I understand it, it didn’t solve the problem much? :) - Romanzhivo
  • No, I did not decide. - Frontender

mmm, jerks due to loading during scrolling, try to increase or decrease the speed of the animation, and change the tempo, it helped me personally, then this can really happen with a tight fit of the contours of elements on the page indent the container at least 3 pixels correct, if the problem is this, well, in general, put forward their assumptions, then you understand)