Javascript 单击按钮时网页未滚动

我正在制作一个网站，我想有很多的运动和互动性。我设置的是，当最终用户单击主菜单上的按钮时，页面将水平和垂直滚动到属于该按钮的内容。例如，如果最终用户要单击按钮标签“关于狗的信息”，页面将滚动到一些关于狗的信息

我用来让页面滚动的jQuery插件是ScrollTo插件，但我无法让页面垂直或水平滚动

我的HTML：

我的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");
});

---

您的插件使用不正确。实际将事件附加到的元素应该是设置了“最大宽度/高度”值的元素。之后，应将元素作为第一个参数传递给scrollTo函数：

$('body').scrollTo('#about');

---

请为您的代码创建一个。从代码中删除不必要的部分，它将更加清晰和简短。通过这种方式，您的问题对我们来说将更容易理解。我知道按钮听到了咔嗒声，因为我用一个警报测试了它，当我点击时确实显示了这个警报。

$(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");
});

$('body').scrollTo('#about');