Syntax error unrecognized expression a href not href

One of updates included into WordPress 4.5 is jQuery 1.12.3 replaced jQuery 1.11.3. Cool!
But there is a known issue with older JavaScript code. If your plugin or theme contains code snippet like one below, you will get error message:
“Uncaught Error: Syntax error, unrecognized expression: a[href=#scroll-top]”

jQuery(document).ready(function ($) {
	$('a[href=#scroll-top]').click(function () {
		$('html, body').animate({
			scrollTop: 0
		}, 'slow');
		return false;
	});
});

This code belongs to “jQuery Scroll Top Plugin” and included into the verson 0.0.8 of “Responsive Mobile” theme package from CyberChimps in my case.

How to fix this bug?

The best way to resolve this and similar issues is:
1) update to the latest version of a product.
2) if problem was not resolved after update, contact plugin or theme developer with a support request.
3) if you can not get a valuable answer from developer in a meaning time, follow recommendations below:

The source of this problem is that starting from jQuery 1.12 it’s a requirement to enclose any CSS, HTML selector, like this href=#scroll-top to the pair brackets. In our case as a single quotes are used already in this expression, we should use a double quote, like this 'a["href=#scroll-top"]'.
Full version of the fixed code should be looked this way finally:

jQuery(document).ready(function ($) {
	$('a[href="#scroll-top"]').click(function () {
		$('html, body').animate({
			scrollTop: 0
		}, 'slow');
		return false;
	});
});

This trivial update fixes the error and problem.

Source of the information: https://github.com/jquery/jquery/issues/2824

This small and simple fix allows you to update your WordPress to the latest 4.5 and do not wait while your theme or plugin developer publish its own fix to provide compatibility with the jQuery 1.12.x.

Divi theme

Divi theme version 2.6.4.1 has the similar problem compatibility problem with jQuery v. 1.12.
It shows this error at the browser JavaScript console after update to WordPress 4.5:

jquery.js?ver=1.12.3:2 Uncaught Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])


Divi Version 2.7.3 ( updated 04-13-2016 ) fixes the jQuery issue outlined below. Update your theme.

If you can not update to the latest version, fix this bug yourself:

Open file: wp-content/themes/Divi/js/custom.js
Go to line #706

$( 'a[href*=#]:not([href=#])' ).click( function() {

and enclose # character with double quotes, like this

$( 'a[href*="#"]:not([href="#"])' ).click( function() {

It fixes a JavaScript error which prevented jQuery code execution.

Other themes or plugins

General scenario to find a source of errors of this kind by your own hands:

Make a context search of your theme/plugin JavaScript files for the occurrence of this key
[href
and look if some of them don’t uses quotes after = sign.

To be more exact use as a search key a copy of unrecognized expression from the error message at the browser JavaScript console.

Edit those places adding pair quotes like we did in examples above.

WordPress support team published this resource resource for known compatibility problem with WordPress 4.5:
https://wordpress.org/support/topic/read-this-first-wordpress-45-master-list

This entry was posted
on Thursday, April 14th, 2016 at 02:25 and is filed under WordPress, WordPress hints, advices.
You can follow any responses to this entry through the RSS 2.0 feed.
You can skip to the end and leave a response. Pinging is currently not allowed.

Реализуем плавный переход по якорным ссылкам в рамках текущей страницы. Данный скрипт особенно хорош тем, что не добавляет в строке браузера приставки /#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);
}