Question

我是新来的，我也是jquery的新手。我正在尝试使用background-fixed创建一个带有图片的网站，并在顶部创建四个链接，以便访问每个页面，例如：about，portfolio，contact，gallery。它应该是当我点击about，页面下拉，再次点击，相同的第二个链接等等所有链接。我在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>

Answer 1

您可以使用$(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;
}

Answer 2

如果您有更多“翻转”，那么您应该为CSS制作一个翻转课程并为每个人提供一个唯一的ID。

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>

如何从顶部的菜单向下滚动页面

2 个答案: