个人中心
gpt4 book ai didi

javascript - 单击按钮时网页不滚动

转载 作者：行者123 更新时间：2023-11-28 08:30:56 25 4
gpt4 key购买 nike

我正在制作一个我希望拥有大量动态和交互性的网站。我设置的是当最终用户单击“主菜单”上的按钮时，页面将水平和垂直滚动到归因于该按钮的内容。例如，如果最终用户单击标签为“关于狗的信息”的按钮标签，页面将滚动到有关狗的一些信息。

我用来让页面滚动的 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 &copy; 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");
});

最佳答案

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

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

关于javascript - 单击按钮时网页不滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28270877/

25 4 0
文章推荐： c++ - 我的程序有什么错误？
文章推荐： html - 覆盖 jquery 移动 css
文章推荐： html - 图像放大使用 UL 和 LI 不工作
文章推荐： ios - 如何使用核心数据更新表格 View 单元格中的图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com