Ошибка Uncaught Error: Syntax error, unrecognized expression: # at HTMLAnchorElement. (js.js:8) в JavaScript?

Question

[CortezEmilioCardinal]

Суть в том ,что все работает , но при клике на "Бургер меню" мне выдает ошибку в Js коде.
Ошибка находится на 7 строке. Думаю это как-то связано с " Wrong scope" вот источник https://developer.mozilla.org/en-US/docs/Web/JavaS... , но не уверен.
Вот мой код :
1)$(document).ready(function ()
2){
3) $('a[href^="#"]').click(function () {
4) //Сохраняем значение атрибута href в переменной:
5) var target = $(this).attr('href');
6) $('html, body').animate({
7) scrollTop: $(target).offset().top - 50//можно вычесть высоту меню
}, 500);
return false;
});
});
Вот ошибка :
Uncaught Error: Syntax error, unrecognized expression: #
at Function.se.error (jquery-3.4.1.min.js:2)
at se.tokenize (jquery-3.4.1.min.js:2)
at se.select (jquery-3.4.1.min.js:2)
at Function.se [as find] (jquery-3.4.1.min.js:2)
at k.fn.init.find (jquery-3.4.1.min.js:2)
at k.fn.init (jquery-3.4.1.min.js:2)
at k (jquery-3.4.1.min.js:2)
at HTMLAnchorElement. (js.js:8)
at HTMLAnchorElement.dispatch (jquery-3.4.1.min.js:2)
at HTMLAnchorElement.v.handle (jquery-3.4.1.min.js:2)

Comments

[RU]

Не помогло?

[CortezEmilioCardinal]

RU, нет :( . Ошибку не выдает , но скролит не к выбранному пункту сайта ,а на пару пикселей ниже.

[RU]

CortezEmilioCardinal, можно немного подробнее что вы хотите сделать?
судя по коду, происходит скрол эркна вверх на 50 пикселей от элемента на который жмет пользователь. Если можно, пришлите отдельно HTML и JS

[CortezEmilioCardinal]

RU, Суть в том что когда ты нажимаешь на "бургер меню" выпадает список в котором ты выбираешь раздел. После нажатия на категорию, JS отлавливает ссылку по ID и переносит тебя на нужную часть сайта с отступом в 50px. Все работает,но при нажатии на "бургер меню" вылетает эта ошибка.
HTML:

• Home
  
  
• Services
  
  
• Portfolio
  
  
• About
  
  
• Contact
  
  

CSS:
.menu__list
{
padding-left: 0px;
}
.menu
{
color: #fff;
position: fixed;
left: 0;top: 0;
z-index: 99;
width: 30%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(128, 128, 128, 0.7) ;
transition: 0.5s;
padding-left: 0px;
transform: translateX(-100%);
}
.menu__active
{
transform: translateX(0%);
}

.menu__list
{
display: flex;
justify-content: space-around;
align-items: center;
height: 50%;
flex-direction: column;
}
.menu__btn
{
width: 30px;
height: 30px;
background-color: #fed136;
border-radius: 50%;
position: absolute;
right: -35px;
top: 10px;
}
.menu__btn span,
.menu__btn span::before,
.menu__btn span::after
{
position: absolute;
top: 50%; margin-top: -1px;
left: 50%; margin-left: -10px;
width: 20px;
height: 2px;
background-color: #222;
}
.menu__btn span::before,
.menu__btn span::after
{
content: '';
display: block;
transition: 0.2s;

}
.menu__btn span::before
{
transform: translateY(-5px);
}
.menu__btn span::after
{
transform: translateY(5px);
}

.menu__btn_active span:before
{
transform: rotate(-40deg);
}
.menu__btn_active span
{
height:0;
}
.menu__btn_active span
{
margin-top: 1%;
}
.menu__btn_active span:after
{
transform: rotate(40deg);
}
JS:
$(document).ready(function ()
{

$('a[href^="#"]').click(function () {
//Сохраняем значение атрибута href в переменной:
var target = $(this).attr('href');
$('html, body').animate({
scrollTop: $(target).offset().top - 50//можно вычесть высоту меню
}, 500);
return false;
});
// --(Burger Menu)--
});
$('.menu__btn').on('click', function(e)
{e.preventDefault();
$('.menu').toggleClass('menu__active');
});
$('.menu__btn').on('click', function(e) {
e.preventDefault;
$(this).toggleClass('menu__btn_active');
});

[RU]

CortezEmilioCardinal, понял, а что консоль показывает если после строки
var target = $(this).attr('href');
написать:
console.log(target);
Консоль должна отобразить #имя_элемента, если там пустота, то ошибка из-за этого

Еще необходимо чтобы ссылка на id была уникальной, т.е. больше нигде не повторялась на странице.
допустим есть ссылка:
<a href="#about">О нас</a>

на странице должен быть только один элемент с этим названием
<div id="about"><h1>О нас</h1></div>

[CortezEmilioCardinal]

RU, Спасибо большое за помощь, буду пробовать ;)

Answer 1

[RU]

$(document).ready(function() {
    $('a[href^="#"]').click(function() {
        var target = parseInt($(this).offset().top);
        $('html, body').animate({
            scrollTop: target - 150
        }, "slow");
        return false;
    });
});

Comments

[CortezEmilioCardinal]