Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gilberto Jr

Problemas Com Ancora HTML

Recommended Posts

Gente, boa noite;

 

Um site que eu já havia feito a tempos agora o cliente solicitou que eu reformulasse o site.

 

Só que eu to querendo criar um site com uma pagina só e os links quero colocar uma ANCORA HTML.

 

Eu fiz a tudo certinho. Porem os meus links do menu é relacionado com as DIVS que eu desejo que aparece quando eu clico esta sumindo parte da div. O dados que esta no inicio da div some pois ela entra pra debaixo da div TOPOINICIO.

 

A minha DIV topoinicio ela é fixa então ela não some caso alguém role ou clique no link o site para ver uma informação que esta no final do site. Mas ao clicar no link que é o contato que a informação esta no final do site parte da DIV contato vai ficar por debaixo da div fixa que é a TOPOINICIO.

 

Segue o código que basta copiar e colocar em alguma pagina HTML e fazer o teste vai entender do que eu estou falando.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>..::KW AMBIENTAL::..</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
 
<script type="text/javascript">
jQuery(document).ready(function($) { 
    $(".scroll").click(function(event){        
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
   });
});
</script>

<style type="text/css">
@charset "utf-8";
/* CSS Document */
*{
	padding:0px;
	margin:0px;
}
html,body{
	width:100%;
	height:100%;
}
#topoinicio{
	width:100%;
	height:auto;
	background:#000;
	margin-top:0px;
	z-index:80;
	position:fixed;

}
#topoinicio #conteudotopoinicio{
	width:1150px;
	height:40px;
	background:#fff;
	margin:auto;
}
#topoinicio #logomenu{
	width:100%;
	height:120px;
	background:#f4f4f4;
}
#topoinicio #logomenu #conteudologomenu{
	width:1150px;
	height:120px;
	background:#093;
	margin:auto;
}
#conteudo{
	width:100%;
	height:auto;
	background:#d4d4d4;
	position:absolute;
	margin-top:160px;
}
#conteudo #conteudoprincipal{
	width:100%;
	height:300px;
	background:#FC6;
}
#conteudo #conteudoprincipal #informacaoprincipal{
	width:1150px;
	height:300px;
	background:#F96;
	margin:auto;
}
#conteudo #mpi{
	width:1150px;
	height:400px;
	background:#66C;
	margin:auto;
}
#conteudo #casesucesso{
	width:1150px;
	height:450px;
	background:#966;
	margin:auto;
}
#conteudo #contato{
	width:1150px;
	height:500px;
	background:#F9F;
	margin:auto;
}
</style>

</head>

<body>
<!--INICIO MENU PRINCIPAL-->
<div id="topoinicio">

<div id="conteudotopoinicio">
</div>

<!--INICIO LOGO E MENU-->
<div id="logomenu">

<div id="conteudologomenu">
<a href="#informacaoprincipal" class="scroll">TESTE</a> | <a href="#mpi" class="scroll">O QUE É MPI</a> | <a href="#casesucesso" class="scroll">CASE DE SUCESSO</a> | <a href="#contato" class="scroll">CONTATO</a>
</div>

</div>
<!--FIM LOGO MENU-->

</div>
<!--FIM MENU PRINCIPAL-->




<div id="conteudo">
<!--INICIO CONTEUDO PRINCIPAL DA PAGINA INICIO-->
<div id="conteudoprincipal">

<div id="informacaoprincipal">
teste
</div>

</div>
<!--FIM CONTEUDO PRINCIPAL DA PAGINA INICIO-->


<!--INICIO QUEM MPI-->
<div id="mpi">
O QUE É MPI
</div>
<!--FIM QUEM MPI-->


<!--INICIO CASE SUCESSO-->
<div id="casesucesso">
CASE DE SUCESSO
</div>
<!--FIM CASE SUCESSO-->


<!--INICIO CONTATO-->
<div id="contato">
CONTATO DA KW AMBIENTAL
</div>
<!--FIM CONTATO-->

</div>
</body>
</html>

Desde já agradeço.

 

Att;

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara eu também estou desenvolvendo para meus projetos esse esquema, e no seu caso só precisa de uma padding-top em cada div correspondente fiz as modificações segue seu script:

 

Testei no google chrome, firefox, e internet 8 mas não testei em outros navegadores e funcionou nesses segue seu script resolvido:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>..::KW AMBIENTAL::..</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
 
<script type="text/javascript">
jQuery(document).ready(function($) {
    $(".scroll").click(function(event){        
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
   });
});
</script>

<style type="text/css">
@charset "utf-8";
/* CSS Document */
*{
    padding:0px;
    margin:0px;
}
.scroll{
padding-top:-120px;    }
html,body{
    width:100%;
    height:100%;
}
#topoinicio{
    width:100%;
    height:auto;
    background:#000;
    margin-top:-40px;
    z-index:80;
    position:fixed;

}
#topoinicio #conteudotopoinicio{
    width:1150px;
    height:40px;
    background:#fff;
    margin:auto;
}
#topoinicio #logomenu{
    width:100%;
    height:120px;
    background:#f4f4f4;
}
#topoinicio #logomenu #conteudologomenu{
    width:1150px;
    height:120px;
    background:#093;
    margin:auto;
}
#conteudo{
    width:100%;
    height:auto;
    background:#d4d4d4;
    position:absolute;
padding-top:40px;
}
#conteudo #conteudoprincipal{
    width:100%;
    height:300px;
    background:#FC6;
    margin-top:-40px;
}
#conteudo #conteudoprincipal #informacaoprincipal{
    width:1150px;
    height:400px;
    background:#F96;
    margin:auto;
    padding-top:120px;
}
#conteudo #mpi{
    width:1150px;
    height:450px;
    background:#66C;
    margin:auto;
    padding-top:120px;
}
#conteudo #casesucesso{
    width:1150px;
    height:200px;
    background:#966;
    margin:auto;
    padding-top:120px;
}
#conteudo #contato{
    width:1150px;
    height:610px;
    background:#F9F;
    margin:auto;
    padding-top:120px;
}


</style>

</head>

<body>
<!--INICIO MENU PRINCIPAL-->
<div id="topoinicio">

<div id="conteudotopoinicio">
</div>

<!--INICIO LOGO E MENU-->
<div id="logomenu">

<div id="conteudologomenu">
<a href="#informacaoprincipal" class="scroll">TESTE</a> | <a href="#mpi" class="scroll">O QUE É MPI</a> | <a href="#casesucesso" class="scroll">CASE DE SUCESSO</a> | <a href="#contato" class="scroll">CONTATO</a>
</div>

</div>
<!--FIM LOGO MENU-->

</div>
<!--FIM MENU PRINCIPAL-->




<div id="conteudo">
<!--INICIO CONTEUDO PRINCIPAL DA PAGINA INICIO-->
<div id="conteudoprincipal">

<div id="informacaoprincipal">
TESTE
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet purus non massa pellentesque ultricies. Curabitur blandit, ante quis dictum iaculis, est magna faucibus urna, eu dapibus lorem nunc in elit. Nunc posuere pharetra diam id vestibulum. Etiam felis tellus, pellentesque ut commodo sed, pharetra eget nulla. Nullam augue enim, venenatis quis condimentum vitae, interdum ut lectus. Aenean dictum euismod lorem quis imperdiet. Sed eu felis nisl. Maecenas vel libero eu neque fringilla viverra eu adipiscing nisl. Quisque enim urna, tempus at posuere et, aliquet non arcu. Quisque et ultricies nisi.</p>
</div>

</div>
<!--FIM CONTEUDO PRINCIPAL DA PAGINA INICIO-->


<!--INICIO QUEM MPI-->
<div id="mpi">
O QUE É MPI

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet purus non massa pellentesque ultricies. Curabitur blandit, ante quis dictum iaculis, est magna faucibus urna, eu dapibus lorem nunc in elit. Nunc posuere pharetra diam id vestibulum. Etiam felis tellus, pellentesque ut commodo sed, pharetra eget nulla. Nullam augue enim, venenatis quis condimentum vitae, interdum ut lectus. Aenean dictum euismod lorem quis imperdiet. Sed eu felis nisl. Maecenas vel libero eu neque fringilla viverra eu adipiscing nisl. Quisque enim urna, tempus at posuere et, aliquet non arcu. Quisque et ultricies nisi.</p>
</div>
<!--FIM QUEM MPI-->


<!--INICIO CASE SUCESSO-->
<div id="casesucesso">
CASE DE SUCESSO

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet purus non massa pellentesque ultricies. Curabitur blandit, ante quis dictum iaculis, est magna faucibus urna, eu dapibus lorem nunc in elit. Nunc posuere pharetra diam id vestibulum. Etiam felis tellus, pellentesque ut commodo sed, pharetra eget nulla. Nullam augue enim, venenatis quis condimentum vitae, interdum ut lectus. Aenean dictum euismod lorem quis imperdiet. Sed eu felis nisl. Maecenas vel libero eu neque fringilla viverra eu adipiscing nisl. Quisque enim urna, tempus at posuere et, aliquet non arcu. Quisque et ultricies nisi.</p>
</div>
<!--FIM CASE SUCESSO-->


<!--INICIO CONTATO-->
<div id="contato">
CONTATO DA KW AMBIENTAL

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet purus non massa pellentesque ultricies. Curabitur blandit, ante quis dictum iaculis, est magna faucibus urna, eu dapibus lorem nunc in elit. Nunc posuere pharetra diam id vestibulum. Etiam felis tellus, pellentesque ut commodo sed, pharetra eget nulla. Nullam augue enim, venenatis quis condimentum vitae, interdum ut lectus. Aenean dictum euismod lorem quis imperdiet. Sed eu felis nisl. Maecenas vel libero eu neque fringilla viverra eu adipiscing nisl. Quisque enim urna, tempus at posuere et, aliquet non arcu. Quisque et ultricies nisi.</p>
</div>
<!--FIM CONTATO-->

</div>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia

Jeovane Carvalho

Obrigado pela resposta.

 

Funcionou com esse script que você postou. Mas surgiu umas duvidas aqui. Uma das DIV não aparece mais. A div é conteudotopoinicio não aparece no script.

 

Se vc pegar o código novamente que esta sem os padding-top vai ver que existe essa div.

 

E também não tem como fazer sem os PADDING-TOP pois assim eu perco parte da div. Pois vai ficar um espaço em branco caso o usuário use a barra de rolagem e não clicando no script.

Compartilhar este post


Link para o post
Compartilhar em outros sites


<script type="text/javascript">

$(function() {

$(".scroll").bind('click',function(a){

a.preventDefault();

$('body').animate({scrollTop:$(this.hash).offset().top - $('#topoinicio').height()}, 800);

});

});

</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Testei com o seu código do primeiro tópico, e tá funcionando. A única coisa que indiquei, foi ao scroll da página subtrair a altura equivalente do #topoinicio.

 

Com isso, a rolagem vai direto pro topo do elemento desejado, e sem conteúdo ficar abaixo do #topoinicio.

Compartilhar este post


Link para o post
Compartilhar em outros sites


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>..::KW AMBIENTAL::..</title>

<link href="css/estilo.css" rel="stylesheet" type="text/css" />

 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>

 

<script type="text/javascript">

$(function() {

$(".scroll").bind('click',function(a){

a.preventDefault();

$('body').animate({scrollTop:$(this.hash).offset().top - $('#topoinicio').height()}, 800);

});

});

</script>

 

<style type="text/css">

@charset "utf-8";

/* CSS Document */

*{

padding:0px;

margin:0px;

}

html,body{

width:100%;

height:100%;

}

#topoinicio{

width:100%;

height:auto;

background:#000;

margin-top:0px;

z-index:80;

position:fixed;

 

}

#topoinicio #conteudotopoinicio{

width:1150px;

height:40px;

background:#fff;

margin:auto;

}

#topoinicio #logomenu{

width:100%;

height:120px;

background:#f4f4f4;

}

#topoinicio #logomenu #conteudologomenu{

width:1150px;

height:120px;

background:#093;

margin:auto;

}

#conteudo{

width:100%;

height:auto;

background:#d4d4d4;

position:absolute;

margin-top:160px;

}

#conteudo #conteudoprincipal{

width:100%;

height:300px;

background:#FC6;

}

#conteudo #conteudoprincipal #informacaoprincipal{

width:1150px;

height:300px;

background:#F96;

margin:auto;

}

#conteudo #mpi{

width:1150px;

height:400px;

background:#66C;

margin:auto;

}

#conteudo #casesucesso{

width:1150px;

height:450px;

background:#966;

margin:auto;

}

#conteudo #contato{

width:1150px;

height:500px;

background:#F9F;

margin:auto;

}

</style>

 

</head>

 

<body>

<!--INICIO MENU PRINCIPAL-->

<div id="topoinicio">

 

<div id="conteudotopoinicio">

</div>

 

<!--INICIO LOGO E MENU-->

<div id="logomenu">

 

<div id="conteudologomenu">

<a href="#informacaoprincipal" class="scroll">TESTE</a> | <a href="#mpi" class="scroll">O QUE É MPI</a> | <a href="#casesucesso" class="scroll">CASE DE SUCESSO</a> | <a href="#contato" class="scroll">CONTATO</a>

</div>

 

</div>

<!--FIM LOGO MENU-->

 

</div>

<!--FIM MENU PRINCIPAL-->

 

 

 

 

<div id="conteudo">

<!--INICIO CONTEUDO PRINCIPAL DA PAGINA INICIO-->

<div id="conteudoprincipal">

 

<div id="informacaoprincipal">

teste

</div>

 

</div>

<!--FIM CONTEUDO PRINCIPAL DA PAGINA INICIO-->

 

 

<!--INICIO QUEM MPI-->

<div id="mpi">

O QUE É MPI

</div>

<!--FIM QUEM MPI-->

 

 

<!--INICIO CASE SUCESSO-->

<div id="casesucesso">

CASE DE SUCESSO

</div>

<!--FIM CASE SUCESSO-->

 

 

<!--INICIO CONTATO-->

<div id="contato">

CONTATO DA KW AMBIENTAL

</div>

<!--FIM CONTATO-->

 

</div>

</body>

</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado

André Campos

Resolveu o meu problema no CHROME. Agora não preciso usar mais o PADDING-TOP.

 

Mas no firefox não funcionou. Tenho que fazer alguma outra implementação para funcionar nesse navegador?

 

 

 

Obrigado pela força agora é foco e cair pra dentro do projeto.

 

Att;

Compartilhar este post


Link para o post
Compartilhar em outros sites

Da maneira que o André campos fez fica até melhor eu tinha me esquecido que poderia implementar as regras dentro do java, mas aqui no firefox funcionou para mim, não sei o que aconteceu com você mas funcionou, você queria descer mais o menu fixed seria isso...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Jeovane, boa tarde;

 

agora funcionou aqui. o codigo jquery estava assim

<script type='text/javascript' src='js/jquery.min.js'></script>
 
<script type="text/javascript">
$(function() { 
    $(".scroll").bind('click',function(a){
        a.preventDefault();
        $('body').animate({scrollTop:$(this.hash).offset().top - $('#topoinicio').height()}, 800);
   });
});
</script>

Eu coloquei assim e funcionou

<script type='text/javascript' src='js/jquery.min.js'></script>
 
<script type="text/javascript">
$(function() { 
    $(".scroll").bind('click',function(a){
        a.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top - $('#topoinicio').height()}, 800);
   });
});
</script>

inclui a tag HTML junto com o BODY que esta no script do JQUERY.

 

Att;

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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