как я могу прокрутить страницы вниз из меню наверху

Я новичок здесь, и я новичок в jquery. Я пытаюсь сделать сайт с background-fixed с изображением и четырьмя ссылками сверху, чтобы перейти на каждую страницу, например: о, портфолио, контакте, галерее. Это должно быть, когда я нажимаю на, выпадающая страница и снова после нажатия, то же самое для второй ссылки и так далее для всех ссылок. Я написал следующие коды в html и css. Я закончил с одной страницей, но не знаю, как добавить больше страниц.как я могу прокрутить страницы вниз из меню наверху

Вот мой CSS:

body{ 
    margin:auto; 
    padding:auto; 
} 
#page{ 
    width:1000px; 
    height:1000px; 
    border:1px solid red; 
    background-image:url('done3.jpg'); 
} 
#panel{ 
    padding:50px;display:none; 
} 
#panel 
{ 
    padding:300px; 
    text-align:center; 
    background-color:#e5eecc; 
    border:solid 1px #c3c3c3; 
} 
#flip 
{ 
    width:100px; 
    padding:15px; 
    text-align:center; 
    background-color:pink; 
    border:solid 1px #c3c3c3; 
}

Вот мой HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
     </script> 

     <script> 
      $(document).ready(function(){ 
       $("#flip").click(function(){ 
        $("#panel").slideToggle("slow"); 
       }); 
      }); 
     </script> 

     <link rel="stylesheet" type="text/css" href="style.css"> 
     <title>demo</title> 
    </head> 

    <body> 
     <div id="page"> 
      <div id="flip">about us</div> 
      <div id="panel">about us</div> 
     </div> 
    </body> 
</html>

источник

2013-07-26 sukh jeet

Что именно ваш вопрос? –

Вы можете установить текущую позицию прокрутки с $(window).scrollTop(positionInPixels); и получить положение элементов на веб-сайте с .offset().top. Полагая, что вместе, и при условии, $link ваша ссылка и $target является цель вы хотите, чтобы перейти к:

$link.click(function(e) { 
    e.preventDefault(); 

    if($(window).scrollTop() != $target.offset().top) { 
     $(window).scrollTop($target.offset().top); 
    } else { 
     $(window).scrollTop(0); 
    } 

    return false; 
}

источник

2013-07-26 19:33:15

это работает, wowww.thanks. могу ли я также сдвинуть его с другой стороны? например, с правой стороны налево? должен ли я использовать chande slidedown() или что-то еще –

Для горизонтальной прокрутки вы можете использовать 'scrollLeft' вместо' scrollTop' и 'offset(). left' вместо' offset(). top'! –

Если у вас будет больше «сальто», то вы должны сделать класс флип для CSS и дать каждому один уникальный Я БЫ.

CSS:

<style> 
body 
{ 
margin:auto; 
padding:auto; 
} 
#page 
{ 
width:1000px; 
height:1000px; 
border:1px solid red; 
background-image:url('done3.jpg'); 
} 
.panel 
{padding:50px;display:none; 
} 
.panel 
{ 
padding:300px; 
text-align:center; 
background-color:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
.flip 
{ 
width:100px; 
padding:15px; 
text-align:center; 
background-color:pink; 
border:solid 1px #c3c3c3; 
} 
</style>

HTML:

<div class="flip" id="flip">about us</div><div class="flip" id="flip2">about us2</div> 
<div class="panel" id="panel">content</div> 

<div class="panel" id="panel2">content2</div>

Вы также должны добавить больше к вашему JavaScript, что делать, когда она нажата. Вот пример, но вы должны сделать его более функциональным, чтобы вы не копировали и не вставляли его для каждого «флип».

<script> 
$(document).ready(function(){ 
$("#flip").click(function(){ 
$("#panel").slideToggle("slow"); 
}); 
$("#flip2").click(function(){ 
$("#panel2").slideToggle("slow"); 
}); 

}); 
</script>

Настоящая частично работающая версия. Могут быть много улучшений, но, надеюсь, достаточно, чтобы вы начали.

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
$("#flipabout").click(function(){ 
$("#panelabout").slideToggle("slow"); 
}); 
$("#flipportfolio").click(function(){ 
$("#panelportfolio").slideToggle("slow"); 
}); 
$("#flipcontact").click(function(){ 
$("#panelcontact").slideToggle("slow"); 
}); 
$("#flipgallery").click(function(){ 
$("#panelgallery").slideToggle("slow"); 
}); 
}); 
</script> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<title>demo</title> 
<style> 
body 
{ 
margin:auto; 
padding:auto; 
} 
#page 
{ 
width:1000px; 
height:1000px; 
border:1px solid red; 
background-image:url('done3.jpg'); 
} 
.panel 
{padding:50px;display:none; 
} 
.panel 
{ 
padding:300px; 
text-align:center; 
background-color:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
.flip 
{ 
width:100px; 
padding:15px; 
text-align:center; 
background-color:pink; 
border:solid 1px #c3c3c3; 
float: left; 
} 
</style> 
</head> 
<body> 
<div id="page"> 
<div class="flip" id="flipabout">about us</div> 
<div class="flip" id="flipportfolio">portfolio</div> 
<div class="flip" id="flipcontact">contact</div> 
<div class="flip" id="flipgallery">gallery</div> 
<div class="panel" id="panelabout">about...</div> 
<div class="panel" id="panelportfolio">Portfolio...</div> 
<div class="panel" id="panelcontact">contact...</div> 
<div class="panel" id="panelgallery">gallery....</div> 
</div> 
</body> 
</html>

источник

2013-07-26 19:34:36

Большое спасибо за вашу поддержку –

как я могу прокрутить страницы вниз из меню наверху

ответ

Смежные вопросы