Плавный скролл к элементу — jQuery

Плавный скролл к элементу — jQuery

В последнее время бешеной популярностью пользуются типы сайтов под названием Landing Page - или "лендинги". Они удобны тем, что пользователь получает всю необходимую информацию на одной странице. Чаще всего это информация о товаре, которая описывает его со всех сторон, дает понять сильные стороны и преимущества и конечно же оформить заказ.

Такие сайты получаются довольно длинными, поэтому для удобства перемещения по ним часто делают навигационное меню со ссылками на конкретные разделы. Давайте научимся делать так, чтобы при клике на ссылку, сайт плавно прокручивался до нужного места.

Будем считать, что все ссылки, которые есть на странице, ведут на конкретные блоки. Поэтому пишем следующий скрипт:

$("a").click(function () {
    var elementClick = $(this).attr("href");
    var destination = $(elementClick).offset().top;
    $('html, body').animate({ scrollTop: destination }, 600);
    return false;
});

Важно отметить, что ссылка должна быть вида: href="#id". А элемент, до которого будем крутить: id="id". Вот и вся хитрость.

Альтернативный взгляд

Раньше делали немного по другому - использовали определение браузера - $.browser.safari || $.browser.webkit и в зависимости от условия делали либо $('body').animate(), либо $('html').animate(). С версии 1.9 jQuery - $.browser была удалена и поэтому не сработает. Но можно модифицировать код и получить такой скрипт:

var matched, browser;
jQuery.uaMatch = function( ua ) {
    ua = ua.toLowerCase();
 
    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
        /(msie)[\s?]([\w.]+)/.exec( ua ) ||
        /(trident)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        [];
 
    return {
        browser: match[ 1 ] || "",
        version: match[ 2 ] || "0"
    };
};
matched = jQuery.uaMatch( navigator.userAgent );
//IE 11+ fix (Trident)
matched.browser = matched.browser == 'trident' ? 'msie' : matched.browser;
browser = {};
if ( matched.browser ) {
    browser[ matched.browser ] = true;
    browser.version = matched.version;
}
$("a").click(function () {
	var elementClick = $(this).attr("href");
	var destination = $(elementClick).offset().top;
	if (browser.chrome || browser.webkit ) {
		$('body').animate({ scrollTop: destination }, 600);
	} else {
		$('html').animate({ scrollTop: destination }, 600);
	}
	return false;
});

Вот и все. Всем успехов!

26.03.17
Для просмотра сайта обновите браузер.