Почему страница обновляется?

Question

[fsociety_one]

Добрый день! Имеется сайт "portfol.site". Все работает, но. При адаптиве от 730px появляется 'бургер' меню, оно тоже работает. К ссылкам подключен якорь к блокам и плавный скролл

jQuery(document).ready(function($){
   	 	$(".wrapsMenu").on("click","a", function (event) {
       		event.preventDefault();
       	 	var id  = $(this).attr('href'),
        	top = $(id).offset().top;
        	$('body,html').animate({scrollTop: top}, 1000);
    	});
	});

	function myFunc() {
    var x = document.getElementById('myNav');
    var y = document.getElementById('menuTran');
    if (x.className === 'menu-list' || x.className === 'NaN') {
      x.className += ' visMenu';
      y.className += ' menuTran';
    } else {
      x.className -= ' visMenu';
      y.className -= ' menuTran';
  	}
  }

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

Answer 1

[Vladimir Bill]

В элементах меню с тегами "a" используйте в качестве значений атрибутов href javascript:void(0). Для записи id секций подойдёт data-атрибут

Answer 2

[Дмитрий Рублёв]

Добавьте
return false;
в onClick после вызова функции myFunc() у бургер-меню - тогда перестанет срабатывать переход по ссылке, которая у вас там прописана. И заодно можете поменять адрес назначения самой ссылки - с подчёркивания на решёточку.