javascript: onclick="scrollWin()" 无法按预期工作

编程问答 2022-08-07

问题描述

我有以下简单的页面：

除了用鼠标滚动外，我希望当您单击顶部的名称时，页面应自动向下滚动到页面底部并显示菜单。 问题是，使用我的 onclick="scrollWin()" 函数，页面向下滚动一毫秒，菜单出现，但随后页面自行向上滚动一点，菜单再次消失，而当页面出现时它应该留在那里已滚动到底部。我认为问题可能出在视差效应上。请帮帮我好吗？

代码如下：


<!DOCTYPE html>
<html>

<head>
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <Meta charset="UTF-8">
    <style>
        body,html {
            height: 100%;
            margin: 0;
            font-family: 'Karla';
            font-size: 22px;

        }


        * {
            Box-sizing: border-Box;
        }

        .header {
            margin-left: 190px;
            margin-top: 40px;
            text-align: left;
            opacity: 0.4;

        }

        .container {
            height: 10vh;
            background-color: white;
        }

        .container1 {
            height: 10vh;
            background-color: white;
        }

        .textabout {

            position: relative;
            top: 200px;
            left: 900px;
            text-align: center;
            opacity: 0.5;
            text-align: justify;
            text-justify: inter-word;
            /* scroll-snap-align: start;*/


        }

        .parallax {
            /* The image used */
            background-image: url("IMG_7916_cut.jpg");
            opacity: 0.8;


            /* Full height */
            height: 100%;

            /* Create the parallax scrolling effect */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 567px 756px;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: white;
            height: 10vh;
            margin-right: 30px;
            margin-bottom: 30px;
        }

        li {
            float: right;
        }

        li a {
            display: block;
            color: black;
            text-align: center;
            text-decoration: none;
            opacity: 0.4;
            padding: 16px 16px;
            margin-left: 30px;
            margin-right: 30px;
            transition: 0.2s;
        }

        li a:hover,li a:focus {
            color: black;
            opacity: 1;
        }

        /* On screens that are 992px wide or less */
        @media screen and (max-width: 600px) {

            .header {
                position: relative;
                text-align: left;
                display: block;
                margin-left: 80.5px;
                margin-right: auto;
            }

            ul {
                margin-right: 17px;
            }

            .parallax {
                background-size: 85%;
            }
        }

    </style>
</head>

<body>
    <div class="container1">
        <div class="header">
            <a href="" onclick="scrollWin()">|bacheva</a>
        </div>
    </div>
    <div class="parallax"></div>

    <div class="container">

        <ul style="font-size:22px;">
            <li><a href="about_final.html">|about</a></li>
            <li><a href="project%20page_final.html">|work</a></li>
            <li><a href="home_final.html">|home</a></li>
        </ul>
    </div>


    <script>
        function scrollWin() {
                        window.scrollTo(0,document.body.scrollHeight); 
        }

    </script>

</body>

</html>

预先感谢您的帮助。

解决方法

是的，您可以将其更改为 div（注意我给了 div class="btn" 并在 css 上添加了 cursor: pointer 你可以在这里看到工作示例： https://codepen.io/Elnatan/pen/JjRvpaJ

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="UTF-8">
    <style>
        body,html {
            height: 100%;
            margin: 0;
            font-family: 'Karla';
            font-size: 22px;

        }


        * {
            box-sizing: border-box;
        }

        .header {
            margin-left: 190px;
            margin-top: 40px;
            text-align: left;
            opacity: 0.4;

        }

        .container {
            height: 10vh;
            background-color: white;
        }

        .container1 {
            height: 10vh;
            background-color: white;
        }
      .btn{
        cursor:pointer;
      }
        .textabout {

            position: relative;
            top: 200px;
            left: 900px;
            text-align: center;
            opacity: 0.5;
            text-align: justify;
            text-justify: inter-word;
            /* scroll-snap-align: start;*/


        }

        .parallax {
            /* The image used */
            background-image: url("IMG_7916_cut.jpg");
            opacity: 0.8;


            /* Full height */
            height: 100%;

            /* Create the parallax scrolling effect */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 567px 756px;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: white;
            height: 10vh;
            margin-right: 30px;
            margin-bottom: 30px;
        }

        li {
            float: right;
        }

        li a {
            display: block;
            color: black;
            text-align: center;
            text-decoration: none;
            opacity: 0.4;
            padding: 16px 16px;
            margin-left: 30px;
            margin-right: 30px;
            transition: 0.2s;
        }

        li a:hover,li a:focus {
            color: black;
            opacity: 1;
        }

        /* On screens that are 992px wide or less */
        @media screen and (max-width: 600px) {

            .header {
                position: relative;
                text-align: left;
                display: block;
                margin-left: 80.5px;
                margin-right: auto;
            }

            ul {
                margin-right: 17px;
            }

            .parallax {
                background-size: 85%;
            }
        }

    </style>
</head>

<body>
    <div class="container1">
        <div class="header">
            <div class="btn" onclick="scrollWin()">|bacheva</div>
        </div>
    </div>
    <div class="parallax"></div>

    <div class="container">

        <ul style="font-size:22px;">
            <li><a href="about_final.html">|about</a></li>
            <li><a href="project%20page_final.html">|work</a></li>
            <li><a href="home_final.html">|home</a></li>
        </ul>
    </div>


    <script>
        function scrollWin() {
                        window.scrollTo(0,document.body.scrollHeight); 
        }

    </script>

</body>

</html>
javascriptonclickonclickonclickparallax