JS scrollTo effect, make working by clicking on li and not only on a href="#"

Question

JS scrollTo effect, make working by clicking on li and not only on a href="#"

Navigation

#1 by (1 votes)

0

My problem is the following, I'm using the scrollTo plugin, everything was ok, working on all the elements I wanted on the site.

But they asked to change something in the menu, currently the effect only happens when I click on the <a href="#"> tag, but they asked to change, now everything has to happen when I click on <li> . Ok it could involve li within a , but I would have a bigger work (I believe) than change in JS , but not to achieve, I already modified the code below a few times and only worked when in% I've put html in the href tag (but that should be wrong right).

Follow the code.

	$(function(){
	
		var wrapper = $("#wrapper"),
    $menu = $("#menu");
	
		$menu.on("click","a", function(){
			var $this = $(this),
					href = $(this).attr("href"),
		      topY = $(href).offset().top;
	
		    TweenLite.to(window, 2, {scrollTo:{y:topY, x:0}, ease:Cubic.easeIn});
	
		  return false;
		});
	
	});

nav#menu.menu
	ul
		li.icon-play
			a(href="#home")
		li.link-empresa
			a(href="#empresa") playlearn
		li.link-tecnologias
			a(href="#tecnologicas") tecnologia educacional
		li.link-cases
			a(href="#cases") portifólio
		li.link-contato
			a(href="#contato") contato

javascript html scrollto

asked by anonymous 16.02.2017 / 14:08

1 answer

Angular ng-repeat and $ sce.trustAsHtml How to put a color on the tr of a dynamically selected Radio

score 1 · Accepted Answer

I changed your code to be triggered by clicking <li> and searching using .find() the <a> element inside it and recovering its href :

$(function(){
	
		var wrapper = $("#wrapper"),
    $menu = $("#menu");
	
		$menu.on("click","li", function(){
			var este = $(this),
					href = $(this).find("a").attr("href"),
		      topY = $(href).offset().top;
	
		     $('html, body').animate({ scrollTop: topY }, 800);
	
		  return false;
		});
	
	});

.ex {
   height: 200px;
   background: #EEE;
   border: 1px solid #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><navid="menu" class="menu">
<ul>
  <li class="icon-play">
    <a href="#home">HOME</a>
  </li>
  <li class="link-empresa">
    <a href="#empresa">playlearn</a>
  </li>
  <li class="link-tecnologias">
    <a href="#tecnologicas">tecnologia educacional</a>
  </li>
  <li class="link-cases">
    <a href="#cases">portifólio</a>
  </li>
  <li class="link-contato">
    <a href="#contato">contato</a>
  </li>
</ul>
</nav>

<div id="home" class="ex"></div>
<div id="empresa" class="ex"></div>
<div id="tecnologicas" class="ex"></div>
<div id="cases" class="ex"></div>
<div id="contato" class="ex"></div>

I changed the code to work using jQuery only, but this is according to your need / desire.