Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal.
Gostaria de saber algum código de JavaScript ou CSS para solucionar isso
Esse é o código :
Seguinte, estou utilizando uma página com ancora em "abas", porém quando clico no link dentro da ABA ele abre certinho mais puxa para o TOP da página o id correspondente, e assim prejudica o MENU que está fixo na parte de cima (pois corre a página)
Gostaria de saber se têm como ao clicar no âncora do link, ele direcionar para uma posição definida. Pois o que acontece é ele levar o div #id até o topo do navegador.
Tenho um script que faz uma rolagem suave ao clicar no link com âncora. O problema é que ele rola a página toda. Preciso que ele role somente o conteúdo que está dentro de uma div específica e o resto da página permaneça fixa. Alguém pode ajudar?
Segue codigo que tenho:
$(".scrollSuave").click(function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top - 00
}, 500);
})
<div class="col-lg-3">
<a href="#" class="list-group-item active">
TÓPICOS DA AJUDA
</a>
<a href="#funcionamento" class="list-group-item scrollSuave">Opção 1</a>
<a href="#cadastrar" class="list-group-item scrollSuave">Opçao 2</a>
</div>
<hr>
<!-- O CONTEUDO DESTA DIV QUE DEVE ROLAR O CLICAR NO LINK -->
<div class="col-lg-9">
<h4 id="funcionamento"><b>Opção 1</b></h4>
texto aqui
<h4 id="cadastrar"><b>Opção 1</b></h4>
texto aqui
</div>
print da pagina para facilitar
Preciso de ajuda em um bug que não estou entendendo. Fiz um site com todo o conteúdo em uma só página, cada página do menu, desce rolando até o certo ponto. Mas pela primeira vez, sempre vai pro lugar errado, na maioria das vezes a página rola pra baixo da parte que deveria. Queria a ajuda de vocês pra descobrir o que esta acontecendo.
Código do javascript:
$(window).load(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 1500);
return false;
});
}
}
});
});
Código html do menu:
<nav id="menu">
<ul>
<li>
<img id="logo" src="logo-menu.png" alt="logo" width="100px"/>
</li>
<li>
<a href="#topo">Home</a>
</li>
<li>
<a href="#sobre">Sobre</a>
</li>
<li>
<a href="#portfolio">Portfólio</a>
</li>
<li>
<a href="#servicos">Serviços</a>
</li>
<li>
<a href="#rodape">Contato</a>
</li>
</ul>
</nav>
A paginas estão linkadas pelo 'id'. São articles, sections, divs e footers.
Estou com uma duvida criei um site com ancoras mais gostaria de transformar os links em url amigável com o web.config do iis mais não esta dando muito certo há alguma maneira de fazer isso , Segue abaixo parte do meu código.