Функция jQuery smoothAnchor предоставляет вам легкий скрипт, который может сделать прокрутку ссылок внутри страницы плавной прокруткой . Есть несколько плагинов, которые делают то же самое, но это моя облегченная версия, и я знаю, что она работает должным образом во всех основных браузерах. Так что, если вам нужен быстрый фрагмент кода для плавной прокрутки к заголовкам разделов, этот 2-килобайтный сценарий может оказаться достаточно для работы!
демонстрация
Секция 1
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Nulla elementum ligula vel diam gravida id mollis lacus sagittis. Cras utfelis et mauris fermentum mollis sed vel sapien. Cras accumsan vestibulum est, sed suscipit felis dignissim a. Donec ut turpis neque, at volutpat libero. Nulla facilisi. Nulla scelerisque suscipit neque, id lobortis enim egestas id. Аликуам сидел Амет Либеро в augu tempor fermentum. Ut aliquet urna quis risus tempor ut malesuada quam malesuada. Aenean fermentum gravida condimentum. Donec на курсах Еним. Сед претиум лаореет конг. Donec accumsan metus et mi pretium condimentum. Нуллам фоусибус рисус. Quisque condimentum sagittis accumsan. Suspendisse quis lorem nulla.
Последовательность Vestibulum, мучитель в стихии laoreet, odio tellus dictum ipsum, в eleifend lorem purus et dui. Crasmodo libero eget orci ultrices feugiat. Vivamus sed ante sed felis pulvinar volutpat et nec sapien. Aliquam Blandit Scelerisque augue на Коммодо. Sed scelerisque augue eget dui condimentum posuere. Phasellus ac mauris diam, porttitor risus. Меценат седи конквот долор. Ut nec urna augue. Duis et felis nunc ultrices porta. Sed id iaculis mauris. Nulla cursus tellus at ipsum posuere mollis. Vivamus condimentum fringilla malesuada.
Раздел 2
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Nulla elementum ligula vel diam gravida id mollis lacus sagittis. Cras utfelis et mauris fermentum mollis sed vel sapien. Cras accumsan vestibulum est, sed suscipit felis dignissim a. Donec ut turpis neque, at volutpat libero. Nulla facilisi. Nulla scelerisque suscipit neque, id lobortis enim egestas id. Аликуам сидел Амет Либеро в augu tempor fermentum. Ut aliquet urna quis risus tempor ut malesuada quam malesuada. Aenean fermentum gravida condimentum. Donec на курсах Еним. Сед претиум лаореет конг. Donec accumsan metus et mi pretium condimentum. Нуллам фоусибус рисус. Quisque condimentum sagittis accumsan. Suspendisse quis lorem nulla.
Последовательность Vestibulum, мучитель в стихии laoreet, odio tellus dictum ipsum, в eleifend lorem purus et dui. Crasmodo libero eget orci ultrices feugiat. Vivamus sed ante sed felis pulvinar volutpat et nec sapien. Aliquam Blandit Scelerisque augue на Коммодо. Sed scelerisque augue eget dui condimentum posuere. Phasellus ac mauris diam, porttitor risus. Меценат седи конквот долор. Ut nec urna augue. Duis et felis nunc ultrices porta. Sed id iaculis mauris. Nulla cursus tellus at ipsum posuere mollis. Vivamus condimentum fringilla malesuada.
Раздел 3
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Nulla elementum ligula vel diam gravida id mollis lacus sagittis. Cras utfelis et mauris fermentum mollis sed vel sapien. Cras accumsan vestibulum est, sed suscipit felis dignissim a. Donec ut turpis neque, at volutpat libero. Nulla facilisi. Nulla scelerisque suscipit neque, id lobortis enim egestas id. Аликуам сидел Амет Либеро в augu tempor fermentum. Ut aliquet urna quis risus tempor ut malesuada quam malesuada. Aenean fermentum gravida condimentum. Donec на курсах Еним. Сед претиум лаореет конг. Donec accumsan metus et mi pretium condimentum. Нуллам фоусибус рисус. Quisque condimentum sagittis accumsan. Suspendisse quis lorem nulla.
Последовательность Vestibulum, мучитель в стихии laoreet, odio tellus dictum ipsum, в eleifend lorem purus et dui. Crasmodo libero eget orci ultrices feugiat. Vivamus sed ante sed felis pulvinar volutpat et nec sapien. Aliquam Blandit Scelerisque augue на Коммодо. Sed scelerisque augue eget dui condimentum posuere. Phasellus ac mauris diam, porttitor risus. Меценат седи конквот долор. Ut nec urna augue. Duis et felis nunc ultrices porta. Sed id iaculis mauris. Nulla cursus tellus at ipsum posuere mollis. Vivamus condimentum fringilla malesuada.
Функция jQuery
var JQUERY4U = {} JQUERY4U.UTIL = { /* * Utility function used to make anchor links animate smoothly instead of jumping. */ smoothAnchor: function (anchorClass) { $('a.'+anchorClass).click(function () { elementClick = $(this).attr("href") destination = $(elementClick).offset().top; $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1100 ); return false; }) } } Насколько я вижу, его нельзя использовать в качестве связующего элемента, так как «return this» делает его заикающимся, поэтому я предлагаю оставить его как отдельную функцию.
использование
Включите класс «smoothAnchor» в любой элемент привязки, а затем просто укажите идентификатор элемента, к которому вы хотите перейти, в разделе этого якоря.
Якорная ссылка:
how much can I borrow?
Целевой элемент:
В будущем можно улучшить плавную анимацию ссылок «наверх», что не составит большого труда.