Ir para conteúdo
lezão

Ancora Scroll

Recommended Posts

Boa noite!

Td bem com vcs?

 

Eu tenho um menu q estou utilizando um Scroll Suave, funciona perfeitamente, mas estou precisando que qnd eu clico no link ele fique selecionado (active)

veja meu código abaixo:

  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>


                                            <li><a class="active" href="#topo" class="scrollSuave">Pagina Inicial</a></li>
                                            <li><a href="#sobre" class="scrollSuave">Sobre nós</a></li>
                                            <li><a href="#servico" class="scrollSuave">Nossos Serviços</a></li>
                                            <li><a href="#portfolio" class="scrollSuave">Portfolio</a></li>
                                            <li><a href="#coment" class="scrollSuave">Deixe um recado </a></li>
                                            <li><a href="#client" class="scrollSuave">Clientes</a></li>


    <div id="topo">                            
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="sobre">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="servico">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="portfolio">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="coment">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="client">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <script type="text/javascript">
    //<![CDATA[


// Exemplo apontando para a class criada para lidar com este efeito

var $doc = $('html, body');
$('.scrollSuave').click(function() {
    $doc.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top}, 2000);
    return false;
});
//]]> 
  </script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não respondendo a sua pergunta... Não seria mais ágil usar só um margin-top no(s) elemento(s) ao invés de tantas tag's break?

Só não ajudo com sua questão porque não mecho com o lixo do jquery se fosse javascript eu te ajudaria.

Compartilhar este post


Link para o post
Compartilhar em outros sites
function listeningToActiveLink() {
  $('a[href*="#"]').click(function(event) {
    var classList = event.target.classList;
    
    if(classList.contains("scrollSuave")) {  
      var allLinks = document.querySelectorAll(".scrollSuave");
      Array.from(allLinks).forEach((el) => el.classList.remove('active'));
      
      classList.add('active');
    }
  })
}

function activeSmoothScroll() {
  var $doc = $('html, body');
  $('.scrollSuave').click(function() {
    $doc.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 2000);
  });
}

$( document ).ready(function() {
  activeSmoothScroll();
  listeningToActiveLink();
});

JsBin: https://jsbin.com/cugebiqato/edit?html,js,output

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por 4Unknow
      Fala galerinha beleza, bom vamos lá.
      Eu tenho um site que o conteúdo dele é tudo em uma página só, o menu, quando escolho uma opção ele leva em uma determinada parte do site referente ao menu clicado. Até aqui ok.
      Porém eu instalei um botão para voltar para o topo quando rola o site para baixo, e como sou leigo em Java, notei que parece que tá tendo conflito com o ScrollTop, pois o botão que coloquei para voltar para o topo também tem o scrolltop. Gostaria de fazer funcionar o menu e o botão juntos, pois quando desativo o .js do botão o menu  funciona normal, quando ativo o botão novamente ele para de funcionar.

      Vou deixar o código de ambos aqui.

      .JS do Menu (scroll.min.js)

       
      (function(e){"use strict";var t="ScrollIt",n="1.0.3";var r={upKey:38,downKey:40,easing:"linear",scrollTime:600,activeClass:"active",onPageChange:null,topOffset:0};e.scrollIt=function(t){var n=e.extend(r,t),i=0,s=e("[data-scroll-index]:last").attr("data-scroll-index");var o=function(t){if(t<0||t>s)return;var r=e("[data-scroll-index="+t+"]").offset().top+n.topOffset+1;e("html,body").animate({scrollTop:r,easing:n.easing},n.scrollTime)};var u=function(t){var n=e(t.target).closest("[data-scroll-nav]").attr("data-scroll-nav")||e(t.target).closest("[data-scroll-goto]").attr("data-scroll-goto");o(parseInt(n))};var a=function(t){var r=t.which;if(e("html,body").is(":animated")&&(r==n.upKey||r==n.downKey)){return false}if(r==n.upKey&&i>0){o(parseInt(i)-1);return false}else if(r==n.downKey&&i<s){o(parseInt(i)+1);return false}return true};var f=function(t){if(n.onPageChange&&t&&i!=t)n.onPageChange(t);i=t;e("[data-scroll-nav]").removeClass(n.activeClass);e("[data-scroll-nav="+t+"]").addClass(n.activeClass)};var l=function(){var t=e(window).scrollTop();var r=e("[data-scroll-index]").filter(function(r,i){return t>=e(i).offset().top+n.topOffset&&t<e(i).offset().top+n.topOffset+e(i).outerHeight()});var i=r.first().attr("data-scroll-index");f(i)};e(window).on("scroll",l).scroll();e(window).on("keydown",a);e("body").on("click","[data-scroll-nav], [data-scroll-goto]",function(e){e.preventDefault();u(e)})}})(jQuery)  
      .JS do Botão Back to top (backtotop.js)

       
      jQuery(window).scroll(function(){ if(jQuery(window).scrollTop()<50){ jQuery('#rocketmeluncur').slideUp(500); }else{ jQuery('#rocketmeluncur').slideDown(500); } var ftrocketmeluncur = jQuery("#ft")[0] ? jQuery("#ft")[0] : jQuery(document.body)[0]; var scrolltoprocketmeluncur = $('rocketmeluncur'); var viewPortHeightrocketmeluncur = parseInt(document.documentElement.clientHeight); var scrollHeightrocketmeluncur = parseInt(document.body.getBoundingClientRect().top); var basewrocketmeluncur = parseInt(ftrocketmeluncur.clientWidth); var swrocketmeluncur = scrolltoprocketmeluncur.clientWidth; if (basewrocketmeluncur < 1000) { var leftrocketmeluncur = parseInt(fetchOffset(ftrocketmeluncur)['left']); leftrocketmeluncur = leftrocketmeluncur < swrocketmeluncur ? leftrocketmeluncur * 2 - swrocketmeluncur : leftrocketmeluncur; scrolltoprocketmeluncur.style.left = ( basewrocketmeluncur + leftrocketmeluncur ) + 'px'; } else { scrolltoprocketmeluncur.style.left = 'auto'; scrolltoprocketmeluncur.style.right = '10px'; } }) jQuery('#rocketmeluncur').click(function(){ jQuery("html, body").animate({ scrollTop: '0px',display:'none'},{ duration: 600, easing: 'linear' }); var self = this; this.className += ' '+"launchrocket"; setTimeout(function(){ self.className = 'showrocket'; },800) });

      Ficaria inteiramente grato se alguém pudesse me ajudar nessa.
      Um forte abraço a toda comunidade.


       
    • Por adrianomonteiroweb
      Galera, é possível realizar o efeito scroll suave até uma div após algum tempo determinado que a página carregar?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.