[На кнопки нажимать два и более раз]
прокрутит страницу на 100px ниже текущего положения
<input type="button" value="window.scrollBy(0,100)" onclick="window.scrollBy(0,100)"/>
прокрутит страницу на 100px ниже верхнего края веб-страницы
<input type="button" value="window.scrollTo(0,100)" onclick="window.scrollTo(0,100)"/>
Как сделать плавный скроллинг вверх
Полный код с фиксацией кнопки можно посмотреть в отдельной статье. Что касается нашей задачи: наверх
<a href="#" id="vverh">наверх</a> <script> function vverh() { window.scrollBy(0,-10); // чем меньше значение (цифра -10), тем выше скорость перемещения if (window.pageYOffset > 0) {requestAnimationFrame(vverh);} // если значение прокрутки больше нуля, то функция повториться } document.getElementById('vverh').addEventListener('click', function(e) { e.preventDefault(); // запрет перехода по ссылке, вместо него скрипт vverh(); }, false); </script>
Плавная прокрутка до якоря
Было сделано фиксированное меню с пунктами, нажав на которые страница плавно прокручивалась до соответствующего id. Пример можно увидеть там же или пощёлкав по панели справа в данной статье.
<script> var linkNav = document.querySelectorAll('[href^="#nav"]'), V = 2; // скорость, может иметь дробное значение через точку for (var i = 0; i < linkNav.length; i++) { linkNav[i].addEventListener('click', function(e) { e.preventDefault(); var w = window.pageYOffset, // прокрутка hash = this.href.replace(/[^#]*(.*)/, '$1'); // id элемента, к которому нужно перейти t = document.querySelector(hash).getBoundingClientRect().top, // отступ от окна браузера до id start = null; requestAnimationFrame(step); // подробнее про функцию анимации [developer.mozilla.org] function step(time) { if (start === null) start = time; var progress = time - start, r = (t < 0 ? Math.max(w - progress/V, w + t) : Math.min(w + progress/V, w + t)); window.scrollTo(0,r); if (r != w + t) { requestAnimationFrame(step) } else { location.hash = hash // URL с хэшем } } }, false); } </script>
3 комментария:
При прокрутке к якорю он слишком высоко оказывается и шапка налазит.
http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#fix
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#name