我正在创建一个我希望拥有大量动作和互动性的网站。我设置的是当最终用户点击“主菜单”上的按钮时，页面将水平和垂直滚动到归属于该按钮的内容。例如，如果最终用户点击按钮标签“关于狗的信息”，该页面将滚动到关于狗的一些信息。
我用来滚动页面的jQuery插件是ScrollTo（）插件，但我不能让页面垂直或水平滚动。
我的HTML：
<!-- Here is our head, containing links to stylesheets and other necessary information -->
<head>
<!-- Setting the type of character set -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Links to some stylesheets -->
<!-- Parent stylesheet -->
<link href="stylesheets/index.css" rel="stylesheet" type="text/css" />
<!-- Font stylesheet -->
<!-- Font created by "Sideshow": https://profiles.google.com/sideshowfonts/about -->
<link href="http://fonts.googleapis.com/css?family=Walter+Turncoat" rel="stylesheet" type="text/css" />
</head>
<!-- End of the head -->
<!-- This is our body, where all the magic happens -->
<body>
<!-- This secton will wrap all of our body's content -->
<section class="wrapper" id="wrapper">
<!-- This section includes all of our icons on the main menu -->
<section class="mainMenu" id="mainMenu">
<!-- What follows are different sections for each row on the page -->
<!-- A section for the top row -->
<section class="topRow">
<a href="#" target="_self" id="aboutInfo"><img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="aboutIcon" id="aboutIcon"></a>
<img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="projectsIcon" id="projectsIcon">
</section>
<!-- A section for the middle row -->
<section class="middleRow">
<img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="feedbackIcon" id="feedbackIcon">
<img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="contactIcon" id="contactIcon">
</section>
<!-- A section for the bottom row -->
<section class="bottomRow">
<img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="blogIcon" id="blogIcon">
<img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="resumeIcon" id="resumeIcon">
</section>
</section>
<!-- This section contains the 'about' content -->
<section class="about" id="about">
<p>Hello, world</p>
</section>
</section>
<!-- All of our scripts will go here -->
<!-- Load up the library jQuery -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<!-- Throw in the 'easing' plugin -->
<script type='text/javascript' src='scripts/jquery.easing.js'></script>
<!-- Add a dash of the 'circulate' plugin -->
<script type='text/javascript' src='scripts/jquery.circulate.js'></script>
<!-- Sprinkle in some 'scrollTo' -->
<script type='text/javascript' src='scripts/jquery-scrollto.js'></script>
<!-- "Jesse, let's cook" -->
<script type='text/javascript' src='scripts/index.js'></script>
</body>
<!-- End of the body -->
<!-- This is our footer -->
<footer>
Copyright © 2015
</footer>
<!-- End of the footer -->
我的CSS：
/* Setting up the DOM */
html
{
display: block; /* Make the DOM display as a block */
overflow: hidden; /* Hide the scrollbar */
background: url(../assets/background.jpg) repeat; /* Create the background for the page */
color: #FFF; /* Initialize the color of the text */
margin: 0px; /* Clear any default margin */
padding: 0px; /* Clear any default padding */
border: none; /* Clear any default borders */
font-family: 'Walter Turncoat', 'Bradley Hand ITC', arial; /* Font created by "Sideshow": https://profiles.google.com/sideshowfonts/about */
}
/* Create the intial settings for the top row */
.topRow
{
margin: 200px 0px 0px; /* How far down is this row going? */
}
/* Modifying the 'about' icon */
.aboutIcon
{
height: 64px; /* Height of the icon */
width: 64px; /* Width of the icon */
margin-left: 700px; /* How far right is the icon going? */
}
/* Modifying the 'projects' icon */
.projectsIcon
{
height: 64px; /* Height of the icon */
width: 64px; /* Width of the icon */
margin-left: 370px; /* How far right is the icon going? */
}
/* Create the initial settings for the middle row */
.middleRow
{
margin: 100px 0px 0px; /* How far down is this row going? */
}
/* Modifying the 'feedback' icon */
.feedbackIcon
{
height: 64px; /* Height of the icon */
width: 64px; /* Width of the icon */
margin-left: 550px; /* How far right is the icon going? */
}
/*Modifying the 'contact' icon */
.contactIcon
{
height: 64px; /* Height of the icon */
width: 64px; /* Width of the icon */
margin-left: 650px; /* How far right is the icon going? */
}
/* Create the initial settings for the bottom row */
.bottomRow
{
margin: 100px 0px 0px; /* How far down is this row going? */
}
/* Modifying the 'blog' icon */
.blogIcon
{
height: 64px; /* Height of the icon */
width: 64px; /* Width of the icon */
margin-left: 700px; /* How far right is the icon going? */
}
/*Modifying the 'resumé icon */
.resumeIcon
{
height: 64px; /* Height of the icon */
width: 64px; /* Width of the icon */
margin-left: 370px; /* How far right is the icon going? */
}
/* Set up the 'about' content */
.about
{
display: block; /* Hide the content... for now */
width: 720px; /* Width of the section */
height: 1080px; /* Height of the section */
margin: 6000px 0px 0px 10000px; /* Margin of the section */
}
/* Altering the footer */
footer
{
height: 30px; /* Height of the content */
width: 500px; /* Width of the content */
margin: 200px auto 0px; /* Adjusting the spacing and entering the content on the page */
text-align: center; /* Centering the text in its area */
font-size: 20px; /* Declare the font size of the text */
font-weight: 500; /* Adjust the thickness of the text */
}
我的JavaScript：
$(document).ready(function()
{
// Call a function to perform our icon animations
animateIcons();
// Hide the content
$("#about").hide(); // The 'about' content
$("#projects").hide(); // The 'projects' content
$("#feedback").hide(); // The 'feedback' content
$("#contact").hide(); // The 'contact' content
$("#blog").hide(); // The 'blog' content
$("#resume").hide(); // The 'resumé' content
// This function is responsible for animating the icons
function animateIcons()
{
// Calling the circulate plug-in for jQuery
// Top row
// "About"
$("#aboutIcon").circulate(
{
speed: 2000, // Speed of each quarter segment of animation, 1000 = 1 second
height: 5, // Distance vertically to travel
width: 25, // Distance horizontally to travel
sizeAdjustment: 100, // Percentage to grow or shrink
loop: true, // Circulate continuously
zIndexValues: [1, 1, 1, 1] // Sets z-index value at each stop of animation
});
// "Projects"
$("#projectsIcon").circulate(
{
speed: 2800, // Speed of each quarter segment of animation, 1000 = 1 second
height: 11, // Distance vertically to travel
width: -25, // Distance horizontally to travel
sizeAdjustment: 100, // Percentage to grow or shrink
loop: true, // Circulate continuously
zIndexValues: [1, 1, 1, 1] // Sets z-index value at each stop of animation
});
// Middle row
// "Feedback"
$("#feedbackIcon").circulate(
{
speed: 1500, // Speed of each quarter segment of animation, 1000 = 1 second
height: -15, // Distance vertically to travel
width: 10, // Distance horizontally to travel
sizeAdjustment: 100, // Percentage to grow or shrink
loop: true, // Circulate continuously
zIndexValues: [1, 1, 1, 1] // Sets z-index value at each stop of animation
});
// "Contact"
$("#contactIcon").circulate(
{
speed: 1500, // Speed of each quarter segment of animation, 1000 = 1 second
height: 15, // Distance vertically to travel
width: 10, // Distance horizontally to travel
sizeAdjustment: 100, // Percentage to grow or shrink
loop: true, // Circulate continuously
zIndexValues: [1, 1, 1, 1] // Sets z-index value at each stop of animation
});
// Bottom row
// "Blog"
$("#blogIcon").circulate(
{
speed: 2800, // Speed of each quarter segment of animation, 1000 = 1 second
height: 11, // Distance vertically to travel
width: -25, // Distance horizontally to travel
sizeAdjustment: 100, // Percentage to grow or shrink
loop: true, // Circulate continuously
zIndexValues: [1, 1, 1, 1] // Sets z-index value at each stop of animation
});
// "Resumé"
$("#resumeIcon").circulate(
{
speed: 2000, // Speed of each quarter segment of animation, 1000 = 1 second
height: 5, // Distance vertically to travel
width: 25, // Distance horizontally to travel
sizeAdjustment: 100, // Percentage to grow or shrink
loop: true, // Circulate continuously
zIndexValues: [1, 1, 1, 1] // Sets z-index value at each stop of animation
});
}
});
// If an icon is clicked, execute an anonymous function
$("#aboutInfo").click(function()
{
$("#about").scrollTo();
// Show the content slowly
$("#about").show("slow");
});
答案 0 :(得分：0)
您的插件使用不正确。实际附加事件的元素应该是设置了最大宽度/高度值的元素。之后，您应该将（作为第一个参数）元素传递给scrollTo函数：
$('body').scrollTo('#about');