Реализуем плавный переход по якорным ссылкам в рамках текущей страницы. Данный скрипт особенно хорош тем, что не добавляет в строке браузера приставки /#link.

Script

$(document).ready(function() {
    // Плавный скролинг по якорям
    $('a[href*=#]').bind("click", function(e){
    var anchor = $(this);
    $('html, body').stop().animate({
    scrollTop: $(anchor.attr('href')).offset().top
    }, 500);
    e.preventDefault();
    });
    return false;
});

Скорость перехода может регулироваться. В предложенном коде указана 500 мл.сек.
Разметка такая: в ссылке указываем хэш-тэг например #glava1 , соответствующему id h2. Пример ниже.

Множество скриптов выдают ошибку Syntax error, unrecognized expression: a[href*=#]. Этот скрипт не вызывает ошибку:

// Плавный скролинг по якорям
$(document).ready(function(){
    $('a[href*="#"]').on('click', function(e){
        var anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top
        }, 777);
        e.preventDefault();
        return false;
    });
});

Но этот вариант скрипта не корректно работает с табами Woocommerce.

Демонстрация

Оглавление

• Глава 1
• Глава 2
• Глава 3
• Глава 4

Глава 1

Рацион обычных горожан и крестьян отличался от современного недостаточным содержанием белка. Около 60% рациона (если не больше у отдельных малообеспеченных групп населения) занимали углеводы: хлеб, лепешки, разные каши. Недостаточную питательность пищи компенсировали количеством. Люди наедались лишь тогда, когда переполнялся желудок. А чувство сытости, как правило, ассоциировалось с тяжестью в желудке. Мясо употребляли сравнительно редко, в основном во время праздников. Правда стол знатных сеньоров, духовенства и городской аристократии был весьма обильным и разнообразным. Различия в питании “верхов» и “низов” общества были всегда. Первые не были ущемлены в мясных блюдах, прежде всего, в силу распространенности охоты (в лесах средневекового Запада в то время было еще достаточно много дичи — повсеместно водились медведи, росомахи, олени, кабаны, косули, туры, зубры, зайцы. Из птиц — тетерева, куропатки, глухари, дрофы, дикие гуси, утки и т.д. По данных археологов, средневековый человек употреблял в пищу мясо таких птиц как журавль, орлан, сорока, грач, цапля, выпь. Деликатесом считались мелкие птички из отряда воробьиных. Рублеными скворцами и синицами разбавляли овощные салаты. В холодном виде подавали жареных корольков и сорокопутов. Иволги и мухоловки запекались, трясогузки — тушились Ласточками и жаворонками начиняли пироги. Чем красивее была птичка, тем изысканнее считалось из нее блюдо. Например, паштет из соловьиных языков готовили лишь по большим праздникам королевские или герцогские повара), при этом истреблялось значительно больше животных, чем их можно было съесть или запасти впрок, и, как правило, большая часть мяса диких животных попросту пропадала из-за невозможности его сохранить. Поэтому к концу Средневековья на охоту уже нельзя было полагаться как на верное средство пропитания. Во-вторых, стол знатного человека всегда можно было пополнить за счет городского рынка (своей изобильностью особенно славился рынок в Париже), где можно было купить самые разнообразные продукты — от дичи до изысканных вин и фруктов. Помимо дичи, употреблялось мясо домашних птиц и животных — свинина (для откорма свиней обычно огораживалась часть леса и туда загонялись дикие кабаны), баранина, козлятина; мясо гусей и кур. Баланс мясной и растительной пищи зависел не только от географических, хозяйственных и социальных, но и от религиозных условий общества. Как известно, в общей сложности около половины года (166 дней) в Средневековье составляли постные дни, связанные с четырьмя основными и еженедельными (среда, пятница, суббота) постами. В эти дни с большей или меньшей строгостью запрещалось есть мясо и мясомолочные продукты. Исключения делались только для тяжело больных, рожениц, евреев. В регионе Средиземного моря мяса потребляли меньше, чем в Северной Европе. Сказывался, вероятно, жаркий климат Средиземноморья. Но и не только он. Из-за традиционного недостатка кормов, выпасов и т.п. там разводили меньше скота. Самым высоким в Европе в период позднего Средневековья было потребление мяса в Венгрии: в среднем около 80 кг в год. В Италии, во Флоренции, к примеру, около 50 кг. В Сьене 30 кг в ХУ в. В Центральной и Восточной Европе ели больше говядины и свинины. В Англии, Испании, Южной Франции и Италии — баранины. Специально для еды разводили голубей. Горожане ели мяса больше, чем крестьяне. Из всех потреблявшихся тогда видов продуктов легко усваивалась, главным образом, свинина, остальные продукты зачастую способствовали несварению. Вероятно, по этой причине получил распространение тип толстого одутловатого человека, внешне достаточно дородного, но в действительности же просто плохо питавшегося и страдавшего от нездоровой полноты.

Глава 2

Ассортимент средневековых огородных культур отличался от современного. В ходу были спаржа, будяк, купена, которые добавляли в салат; лебеда, поташник, кудравец, — которые смешивали в винегрете; щавель, крапива, борщевник, — добавлявшиеся в суп. Сырыми жевали толокнянку, спорыш, мяту и зубровку. Морковь и свекла еще не вошли в рацион питания. Самыми распространенными фруктовыми культурами в средние века были яблоня и крыжовник. В целом, доля овощей и фруктов в рационе питания средневекового человека была небольшой, из-за малого потребления свежих овощей и фруктов в пище почти отсутствовали витамины А, Д, Е, К и особенно С. По сути дела до конца ХУ в. ассортимент овощей и фруктов, выращивавшихся в огородах и садах европейцев, по сравнению с римской эпохой существенно не изменился. Но благодаря арабам европейцы Средневековья познакомились с цитрусовыми: апельсинами и лимонами. Из Египта пришел миндаль, с Востока (после крестовых походов) — абрикосы.

Глава 3

Массовой засолке рыбы долгое время препятствовала недостача соли, которая была в те времена очень дорогим продуктом. Каменную соль добывали редко, чаще использовали солесодержащие источники: выпаривали соленую воду в солеварнях, а затем спрессовывали соль в лепешки, которые продавали по высокой цене. Иногда эти куски соли, — конечно, прежде всего это касается раннего Средневековья — играли роль денег. Но и позднее хозяйки берегли каждую щепотку соли, поэтому засолить много рыбы было непросто. Отсутствие соли отчасти возмещалось употреблением пряностей — гвоздики, перца, корицы, лавра, мускатного ореха и мн. др. Перец и корицу привозили с Востока, и стоили они очень дорого, т. ч. простым людям они были не по карману. Простонародье чаще употребляло в пищу росшие повсюду горчицу, укроп, тмин, лук, чеснок. Широкое употребление пряностей можно объяснить не только гастрономическими вкусами эпохи, но это было и престижно. Кроме того, пряности использовали, чтобы разнообразить блюда и по возможности скрыть скверный запах мяса, рыбы, птицы, которые было трудно хранить свежими в условиях Средневековья. И, наконец, обилием пряностей, положенных в соусы и подливки, возмещалась плохая обработка продуктов и грубость блюд. При этом очень часто пряности меняли первоначальный вкус пищи и вызывали сильное жжение в желудке.

Глава 4

Конечно, обеспеченность продуктами питания во многом зависела от природных, климатических и погодных условий той или иной местности. Любой каприз природы (засуха, сильные дожди, ранние заморозки, бури и мн. др.) выводил хозяйство крестьянина из обычного ритма и мог привести к голоду, страх перед которым европейцы испытывали в течение всего Средневековья. Поэтому не случайно, что на протяжении Средневековья об угрозе голода постоянно говорят многие средневековые авторы. К примеру, голодный желудок стал постоянной темой средневекового романа о лисе Ренаре. В условиях Средневековья, когда угроза голода всегда подстерегала человека, главным достоинством еды и стола были сытность и изобилие. В праздник нужно было наесться так, чтобы в голодные дни было что вспомнить. Поэтому на свадьбу в деревне семья закалывала последнюю скотину и вычищала погреб до основания. В будни же кусок сала с хлебом считался у простолюдина-англичанина “королевской едой”, а какой-нибудь итальянский испольщик ограничивался краюхой хлеба с сыром и луковицей.

В целом же, как указывает Ф. Бродель, в период позднего Средевековья средняя масса ограничивалась 2 тыс. калорий в день и до потребности современного человека (она определяется в 3,5 — 5 тыс. калорий) “дотягивали» только верхние слои общества. Ели в Средневековье обычно два раза в день. От тех времен сохранилась забавная поговорка, что ангелы нуждаются в пище раз в день, люди — дважды, а звери — три раза. Ели в иные часы, нежели сейчас. Крестьяне завтракали не позднее 6 часов утра (не случайно поэтому завтрак по-немецки назывался “фрюштюк”, т.е. “ранний кусок”, с ним схожи по смыслу французское название завтрака “дежене» и итальянское — “диджуне” (ранний). Утром съедали большую часть дневного рациона, чтобы получше поработать. Днем поспевал суп (“супе” во Франции, “соппер» (суповая еда) — в Англии, “миттаг» (полдень) — в Германии), и люди полдничали. К вечеру работа заканчивалась — незачем было и есть. Как только смеркалось, простые люди деревни и города ложились спать. Со временем знать навязала всему обществу свою традицию питания: завтрак приблизился к полдню, в середину дня вклинился обед, ужин сместился к вечеру.

Ошибка Uncaught TypeError

Данная ошибка означает, что якорей на странице с таким идентификатором (как в ссылке) не существует.

Чистый код + смещение

Чистый код плавного перехода по якорям, с компенсационным смещением:

jQuery(document).ready(function() { 

// Плавный скролинг по якорям
   jQuery('a[href*=#]').bind('click', function(e){
      var anchor = jQuery(this);
      jQuery('html, body').stop().animate({
         scrollTop: jQuery(anchor.attr('href')).offset().top<strong>-60</strong>
      }, 500);
      e.preventDefault();
   });
   return false;

});

-60 — это необходимое смещение в пикселях. Дело в том, что обычно при переходе к якорной ссылке, элемент в котором находится ссылка оказывается вплотную к верхнему краю экрана. А смещение это может скомпенсировать.

Альтернативные скрипты

Вот еще пару решений, которые нашел у Чуденкова Алексея

$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},1000),!1}})});

Ещё один вариант без использования jQuery:

var linkNav = document.querySelectorAll('[href^="#"]'), //выбираем все ссылки к якорю на странице
    V = 1;  // скорость, может иметь дробное значение через точку (чем меньше значение - тем больше скорость)
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);
}

Конфликт с отложенной загрузкой

Если на странице есть изображения с отложенной загрузкой, то скроллинг может происходить некорректно, а именно будет промахиваться на высоту подгружаемых блоков. Причем, это происходит при первой загрузке сайта, при последующих обновлениях страницы (без отчистки кэша) скролится все как надо.

Поделиться в соц. сетях: