Anchor linki w Hamburger Menu - klikasz i nic się nie dzieje

Question

Witajcie.
Jestem początkujący w temacie html i css. Mam szablon w którym wszystko działa jak należy na kompie, tabie itd. natomiast w wersji mobilnej jest problem z linkami w hamburger menu. Samo menu jest widoczne i rozwijalne ale po kliknięciu na link z menu nic się nie dzieje. Czy ktoś może zerknąć na kod i spróbować wskazać błąd?

<header>
		<div class="container">
			<div class="logo pull-left animated wow fadeInLeft">
				<img src="img/logo.png" alt="" title="">
			</div>

			
			<nav class="pull-left">
				<ul class="list-unstyled">
					<li class="animated wow fadeInLeft" data-wow-delay="0s"><a href="#about">About</a></li>
					<li class="animated wow fadeInLeft" data-wow-delay=".1s"><a href="#app_features">Features</a></li>
					<li class="animated wow fadeInLeft" data-wow-delay=".2s"><a href="#testimonials">Testimonials</a></li>
				</ul>
			</nav>

			<div class="social pull-right">
				<ul class="list-unstyled">
					<li class="animated wow fadeInRight" data-wow-delay=".2s"><a href="#"><img src="img/facebook.png" alt="" title=""></a></li>
					<li class="animated wow fadeInRight" data-wow-delay=".1s"><a href="#"><img src="img/twitter.png" alt="" title=""></a></li>
					<li class="animated wow fadeInRight" data-wow-delay="0s"><a href="#"><img src="img/google.png" alt="" title=""></a></li>
				</ul>
			</div>

			<span class="burger_icon">menu</span>
		</div>
	</header>

header .burger_icon{
	display: none;
	float: right;
	background: #ffffff;
	padding: 5px 10px;
	text-transform: uppercase;

	color: #43b779;
	font-family: "open_regular", Helvetica, Arial, sans-serif;
	font-size: 14px;

	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;

	margin: 45px 10px 0 0;
}

header .burger_icon:hover{
	cursor: pointer;
}

header .burger_icon.active{
	background: #359663;
	color: #ffffff;
}

 

Comments

Z tego kodu nic się nie da wywnioskować.

---

pełna wersja tego szablonu jest dostępna pod tym adresem: https://github.com/pixelhint/Capture

jest prosty i w miarę fajny i do nauki idealny ale pierwsze co zauważyłem to właśnie ten błąd i chciałbym w ramach uczenia się dojść z pomocą forum co tu jest nie tak...

Answer 1

Jest błąd w implementacji scrollTo, ale nie szukałem szczegółów. Sprawdź dokumentację, albo zmień ten fragment na pure javascript.

	//Navigation menu scrollTo
	$('header nav ul li a').click(function (event) {
		event.preventDefault();
		var section = $(this).attr('href');
		var section_pos = $(section).position();
		if (section_pos) {
			console.log(section_pos);
			// $(window).scrollTo({ top: section_pos.top, left: '0px' }, 1000);
			window.scrollTo({
				top: section_pos.top,
				left: 0,
				behavior: 'smooth'
			});
		}

	});

Jeszcze rzuca się w oczy błąd niewłaściwego użycia parametru event

	$('.app_link').click(function(e){
		event.preventDefault();
		$(window).scrollTo({top:$("#hero").position().top, left:'0px'}, 1000);		
	});

 

Comments

ok zmieniłem kod ScrollTo i "goły" szablon działa na dekstopie
 

//Navigation menu scrollTo
	$('header nav ul li a').click(function(event){

		var section = $(this).attr('href');

		if (section[0] !== "#") return; // drop the link if the first char is not #

		var section_pos = $(section).position();

		if(section_pos){
			$(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);
		}

		event.preventDefault();

	});

natomiast nadal nic się nie dzieje w wersji (mobilnej) landing page - anchory nie działają, kurcze już mi bokiem to wychodzi.... niby taki bzdet a nie umiem sobie z tym poradzić...

---

Ale ja tu nie widzę zmiany.

---

//Navigation menu scrollTo
	$('header nav ul li a').click(function(event){
		event.preventDefault();
		var section = $(this).attr('href');
		var section_pos = $(section).position();

		if(section_pos){
			$(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);
		}
		
	});

to jest oryginał

---

Ale to scrollTo  jest problemem nie ten kod.

Podałem Ci czysty js zamiast scrollTo do podmiany w skrypcie zamiast

  $(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);

wstaw

        window.scrollTo({
            top: section_pos.top,
            left: 0,
            behavior: 'smooth'
        });

Tak samo nicescroll rzuca błędy.

 

Popraw to lub podmień podpięcie tych pluginów z cdn

 

<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"
		integrity="sha512-zMfrMAZYAlNClPKjN+JMuslK/B6sPM09BGvrWlW+cymmPmsUT1xJF3P4kxI3lOh9zypakSgWaTpY6vDJY/3Dig=="
		crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

---

aaaa ok, sorki nie trybnąłem za pierwszym razem, no i jest git teraz!!!

dzięki stary - jesteś wielki!!!

różnica teraz jest taka, że przewijanie do anchora jest dużo szybciej niż było wcześniej ale za to na landingu działa!!!