JavaScript中的scrollTo函数不起作用

问题描述 投票:-3回答:1

当我在javascript中使用scrollto函数时,它什么也不做(甚至在控制台中也没有任何错误)!我正在创建一个在线商店,但是会带您进入另一个页面,因此您总是回到顶部。我用javascript找出了顶部下方有多少像素,然后将其存储在cookie中,当您返回首页时,它将检查cookie,如果有,它将在您尝试时使您失望它,它不起作用!这是我的代码:

<?php

    session_start();

    include 'db.php';

    //unset($_SESSION['products']);
    //unset($_SESSION['Abby']);

    # $_SESSION['name'] $_SESSION['price'] $_SESSION['descrtion'] $_SESSION['img-ar']

    /*unset($_SESSION['name']);
    unset($_SESSION['price']);
    unset($_SESSION['descrtion']);
    unset($_SESSION['img-ar']);*/
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta name='description' content='This website is all about dogs!'>
    <meta name='viewport' content='width=device-width, initial-scale=1.o'>
    <link rel='stylesheet' href='style.css'>
    <link href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap' rel='stylesheet'>
    <link rel='icon' href='PH000247.jpg'>
    <title>Jessie's online store! || Home</title>

    <style>
        body {
            background-color: #F2F2F2;
        }
        header {
            margin-top: -10px;
        }
        .name-of-bis {
            padding-right: 400px;
            padding-left: 800px;
            margin-bottom: 0;
            color: blueviolet;
            font-size: 35px;
        }
        a {
            color: black;
            text-decoration:none;
        }
        .go-to-dashboard {
            font-family: Raleway-SemiBold;
            font-size: 40px;
            color: #FFF;
            letter-spacing: 1px;
            line-height: 15px;
            background: #0049FF;
            border: 2px solid #0049FF;
            border-radius: 40px;
            transition: all 0.3s ease 0s;
            width: 170px;
            height: 30px;
            font-size: 15px;
            margin-left: 150px;
        }
        .go-to-dashboard:hover {
            font-family: Raleway-SemiBold;
            font-size: 40px;
            color: #FFF;
            letter-spacing: 1px;
            line-height: 15px;
            background: #0049FF;
            border: 2px solid #0049FF;
            border-radius: 40px;
            transition: all 0.3s ease 0s;
            width: 175px;
            height: 35px;
            font-size: 15px;
            box-shadow: 0 0 15px 0 #0049FF inset, 0 0 10px 4px #0049FF;
        }
        .go-to-cart:hover {
            font-family: Raleway-SemiBold;
            font-size: 13px;
            color: rgba(103, 192, 103, 0.75);
            letter-spacing: 1px;
            line-height: 15px;
            border: 2px solid rgba(103, 192, 103, 0.75);
            border-radius: 40px;
            background: transparent;
            transition: all 0.3s ease 0s;
            font-size: 15px;
            cursor: pointer;
            box-shadow: 0 0 15px 0 rgba(103, 192, 103, 0.75) inset, 0 0 10px 4px rgba(103, 192, 103, 0.75);
        }
        .go-to-cart {
            font-family: Raleway-SemiBold;
            font-size: 40px;
            color: #FFF;
            letter-spacing: 1px;
            line-height: 15px;
            background: rgb(103, 192, 103, 0.75);
            border: 2px solid rgba(103, 192, 103, 0.75);
            border-radius: 40px;
            transition: all 0.3s ease 0s;
            width: 100px;
            height: 25px;
            font-size: 15px;
            margin-left: 910px;
        }
        .slogen {
            padding-right: 120px;
            padding-left: 860px;
            margin-top: 0;
        }
        h1, h2, h3, h4, h5, h6, p, li, a {
            font-family: 'Noto Sans JP', sans-serif;
        }
        li {
            display: inline;
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 3;
            font-size: 25px;
        }
        .painting-card-left, .painting-card-right-middle, .painting-card-left-middle, .card-p-right1, .card-p-left, .card-p-right-middle, .card-p-left-middle, .card-p-right, #test1 {
            max-width: 300px;
            text-align: center;
            font-family: arial;
            width: 560px;
            height: 405px;
            padding-left: 11px;
            padding-right: 11px;
            display: inline-block;
            margin-bottom: 20px;
        }

        .price {
            color: grey;
            font-size: 16px;
        }

        .card button {
            border: none;
            outline: 0;
            padding: 10px;
            padding-top: 10px;
            color: white;
            text-align: center;
            cursor: pointer;
            width: 100px;
            height: 30px;
            font-size: 12px;
            background-color: #4CAF50;
        }
        .card button:hover {
            background-color: #FF00F0;
            box-shadow: 0 0 15px 0 #FF00F0 inset, 0 0 10px 4px #FF00F0;
            color: #000;
        }
        .painting-card-left, .card-p-left {
            padding-left: 10px;
        }
        img {
            width: 190px;
            height: 190px;
        }
        .card-p-left {
            margin-left: 220px;
            background-color: rgb(41, 255, 98)
        }
        .card-p-left-middle, .card-p-right-middle {
            margin-left: 20px;
            margin-right: 20px;
        }
        .card-p-right {
            margin-left: 20px;
            background-color: rgb(41, 255, 98)
        }
        .card-p-left-middle, .card-p-right-middle {
            background-color: rgb(255, 0, 0);
        }
        .quantity {
            height: 25px;
            width: 100px;
            border: 2px solid black;
        }
        .quantity:focus {
            box-shadow: 0 0 15px 0 #0049FF inset, 0 0 10px 4px #0049FF;
            border: 2px solid #0049FF;
        }
        #test:hover {
            cursor: pointer;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxy/1.6.1/scripts/jquery.ajaxy.min.js' integrity='sha256-jfr3oM7h2TWPi2Q0O0vPuRh+pc0eSfWfpZ2nHXt8tFQ=' crossorigin='anonymous'></script>

    <?php

        if (isset($_COOKIE['y'])) {
            echo "<script>window.scrollTo(0, ".$_COOKIE['y'].");</script>";
        }

    ?>

</head>
<body>

    <header>
        <h3 class='name-of-bis' style="display:inline"><u>Jessie's Online Store!</u></h1>
        <button onclick="window.location.href = 'stafflogin.php'" style="display:inline" class='go-to-dashboard'>Staff login</button>
        <h5 class='slogen'>Get a wide variety of cards and paintings!</h5>
        <nav>
            <ul align='center'>
                <li><a href='index.php'>cards</a></li>
                <li><a href='index.php'>paintings</a></li>
            </ul>
        </nav>
    </header>

    <button align='center' onclick="window.location.href = 'viewCart.php'" class='go-to-cart'>Cart</button>

    <h5 align='center' class='section-name section-name-cards' style='font-size:35px; margin-bottom:20px; margin-top:10px;'>Cards</h5>

    <div class='card-p-left'>
        <form action="info.php" method='post' id='Love-cardinfo'>
            <input type='hidden' name='name' value='Love Card'>
            <input type='hidden' name='img' value='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcReBCK2oOKsft3FhGEWoc9Uk0KyDZ1Zl_cM6HxA-eaUx70AxUON&usqp=CAU'>
            <input type='hidden' name='price' value='5.99'>
            <input type='hidden' name='descripon' value='Let someone know you love them a lot!'>
            <input type='hidden' name='go-back' value='index.php'>
            <a id='test' style='text-decoration:none;' onclick="document.getElementById('Love-cardinfo').submit();">
                <img class='card-img' src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcReBCK2oOKsft3FhGEWoc9Uk0KyDZ1Zl_cM6HxA-eaUx70AxUON&usqp=CAU' style='width:100%'>
                <h1 style='font-size:17px;'>Love Birthday Card</h1>
                <p class='price'>$5.99 AUD</p>
                <p style='font-size:10px;'>Tell someone u love them</p>
            </a>
        </form>
        <form action='insertCart.inc.php' method='POST'>
            <input type='hidden' name='back-to' value='index.php'>
            <input class='quantity' type='number' name='qty' value='1' min='1' max='50'>
            <p class='card button'><button type='submit' name='add-to-cart'>Add to Cart</button></p>
            <input type='hidden' name='name' value='Love Card'>
            <input type='hidden' name='price' value='5.99'>
        </form>
    </div>

    <div class='card-p-left-middle'>
        <form action='info.php' method='post' id='Cake-Birthady-Cardinfo'>
            <input type='hidden' name='name' value='Cake Card'>
            <input type='hidden' name='img' value='https://www.pngkey.com/png/detail/85-854050_cartoon-cake-png-happy-birthday-cake-cartoon.png'>
            <input type='hidden' name='price' value='5.99'>
            <input type='hidden' name='descripon' value="Who doesn't like a cake with<br>a birthaday party! Well I am sure you like it">
            <input type='hidden' name='go-back' value='index.php'>
            <a id='test' style='text-decoration:none;' onclick="document.getElementById('Cake-Birthady-Cardinfo').submit();">
                <img class='card-img' src='https://www.pngkey.com/png/detail/85-854050_cartoon-cake-png-happy-birthday-cake-cartoon.png' style='width:100%'>
                <h1 style='font-size:17px;'>Cake Birthady Card</h1>
                <p class='price'>$5.99 AUD</p>
                <p style='font-size:10px;'>Clacic birthday cake design</p>
            </a>
        </form>
        <form action='insertCart.inc.php' method='POST'>
            <input type='hidden' name='back-to' value='index.php'>
            <input class='quantity' type='number' name='qty' value='1' min='1' max='50'>
            <p class='card button'><button type='submit' name='add-to-cart'>Add to Cart</button></p>
            <input type='hidden' name='name' value='Cake Card'>
            <input type='hidden' name='price' value='5.99'>
        </form>
    </div>

    <div class='card-p-right-middle'>
        <form action='info.php' method='post' id='Ballon-Cardinfo'>
            <input type='hidden' name='name' value='Ballon Card'>
            <input type='hidden' name='img' value='https://heapsandbunchesoftoys.com/wp-content/uploads/2019/04/balloooons.jpg'>
            <input type='hidden' name='price' value='5.99'>
            <input type='hidden' name='descripon' value='A floatty ballon card for<br>someone who likes balloons!'>
            <input type='hidden' name='go-back' value='index.php'>
            <a id='test' style='text-decoration:none;' onclick="document.getElementById('Balloon-Cardinfo').submit();">
                <img class='card-img' src='https://heapsandbunchesoftoys.com/wp-content/uploads/2019/04/balloooons.jpg' style='width:100%'>
                <h1 style='font-size:17px;'>Ballon Card</h1>
                <p class='price'>$5.99 AUD</p>
                <p style='font-size:10px;'>Floatty balloons</p>
            </a>
        </form>
        <form action='insertCart.inc.php' method='POST'>
            <input type='hidden' name='back-to' value='index.php'>
            <input class='quantity' type='number' name='qty' value='1' min='1' max='50'>
            <p class='card button'><button type='submit' name='add-to-cart' min='1'>Add to Cart</button></p>
            <input type='hidden' name='name' value='Balloon Card'>
            <input type='hidden' name='price' value='5.99'>
        </form>
    </div>

    <div class='card-p-right'>
        <form action='info.php' method='post' id='card1info'>
            <input type='hidden' name='name' value='card1'>
            <input type='hidden' name='img' value='https://heapsandbunchesoftoys.com/wp-content/uploads/2019/04/balloooons.jpg'>
            <input type='hidden' name='price' value='5.99'>
            <input type='hidden' name='descripon' value='I do not know!!!!!!!!!!!!!!!'>
            <input type='hidden' name='go-back' value='index.php'>
            <a id='test' style='text-decoration:none;' onclick="document.getElementById('card1info').submit();">
                <img class='card-img' src='https://heapsandbunchesoftoys.com/wp-content/uploads/2019/04/balloooons.jpg' style='width:100%'>
                <h1 style='font-size:17px;'>card1</h1>
                <p class='price'>$5.99 AUD</p>
                <p style='font-size:10px;'>card1</p>
            </a>
        </form>
        <form action='insertCart.inc.php' method='POST'>
            <input type='hidden' name='back-to' value='index.php'>
            <input class='quantity' type='number' name='qty' value='1' max='50'>
            <p class='card button'><button type='submit' name='add-to-cart' min='1'>Add to Cart</button></p>
            <input type='hidden' name='name' value='card1'>
            <input type='hidden' name='price' value='5.99'>
        </form>
    </div>

    <div class='card-p-left'>
        <form action='info.php' method='post' id='card1info'>
            <input type='hidden' name='name' value='card1'>
            <input type='hidden' name='img' value='https://heapsandbunchesoftoys.com/wp-content/uploads/2019/04/balloooons.jpg'>
            <input type='hidden' name='price' value='5.99'>
            <input type='hidden' name='descripon' value='I do not know!!!!!!!!!!!!!!!'>
            <input type='hidden' name='go-back' value='index.php'>
            <a id='test' style='text-decoration:none;' onclick="document.getElementById('card1info').submit();">
                <img class='card-img' src='https://heapsandbunchesoftoys.com/wp-content/uploads/2019/04/balloooons.jpg' style='width:100%'>
                <h1 style='font-size:17px;'>card1</h1>
                <p class='price'>$5.99 AUD</p>
                <p style='font-size:10px;'>card1</p>
            </a>
        </form>
        <form action='insertCart.inc.php' method='POST'>
            <input type='hidden' name='back-to' value='index.php'>
            <input class='quantity' type='number' name='qty' value='1' max='50'>
            <p class='card button'><button type='submit' name='add-to-cart' min='1'>Add to Cart</button></p>
            <input type='hidden' name='name' value='card1'>
            <input type='hidden' name='price' value='5.99'>
        </form>
    </div>

    <div class='card-p-left-middle'>
        <form action='info.php' method='post' id='card1info'>
            <input type='hidden' name='name' value='card1'>
            <input type='hidden' name='img' value='https://heapsandbunchesoftoys.com/wp-content/uploads/2019/04/balloooons.jpg'>
            <input type='hidden' name='price' value='5.99'>
            <input type='hidden' name='descripon' value='I do not know!!!!!!!!!!!!!!!'>
            <input type='hidden' name='go-back' value='index.php'>
            <a id='test' style='text-decoration:none;' onclick="document.getElementById('card1info').submit();">
                <img class='card-img' src='https://heapsandbunchesoftoys.com/wp-content/uploads/2019/04/balloooons.jpg' style='width:100%'>
                <h1 style='font-size:17px;'>card1</h1>
                <p class='price'>$5.99 AUD</p>
                <p style='font-size:10px;'>card1</p>
            </a>
        </form>
        <form action='insertCart.inc.php' method='POST'>
            <input type='hidden' name='back-to' value='index.php'>
            <input class='quantity' type='number' name='qty' value='1' max='50'>
            <p class='card button'><button type='submit' name='add-to-cart' min='1'>Add to Cart</button></p>
            <input type='hidden' name='name' value='card1'>
            <input type='hidden' name='price' value='5.99'>
        </form>
    </div>
    <div class='card-p-right-middle'>
        <form action='info.php' method='post' id='card1info'>
            <input type='hidden' name='name' value='card1'>
            <input type='hidden' name='img' value='https://heapsandbunchesoftoys.com/wp-content/uploads/2019/04/balloooons.jpg'>
            <input type='hidden' name='price' value='5.99'>
            <input type='hidden' name='descripon' value='I do not know!!!!!!!!!!!!!!!'>
            <input type='hidden' name='go-back' value='index.php'>
            <a id='test' style='text-decoration:none;' onclick="document.getElementById('card1info').submit();">
                <img class='card-img' src='https://heapsandbunchesoftoys.com/wp-content/uploads/2019/04/balloooons.jpg' style='width:100%'>
                <h1 style='font-size:17px;'>card1</h1>
                <p class='price'>$5.99 AUD</p>
                <p style='font-size:10px;'>card1</p>
            </a>
        </form>
        <form action='insertCart.inc.php' method='POST'>
            <input type='hidden' name='back-to' value='index.php'>
            <input class='quantity' type='number' name='qty' value='1' max='50'>
            <p class='card button'><button type='submit' name='add-to-cart' min='1'>Add to Cart</button></p>
            <input type='hidden' name='name' value='card1'>
            <input type='hidden' name='price' value='5.99'>
        </form>
    </div>

    <script>
        window.onscroll = function (e) {
            var Ypos = window.scrollY;
            console.log(Ypos);
            document.cookie = "y=" + Ypos;
        };
    </script>;

</body>
</html>

请告诉我出了什么问题。

javascript php scrollto
1个回答
0
投票

如果我把它放在最下面,它的世界工作原理,但是现在我只在页面底部使用滚动功能,它可以正常工作:)! 😁

© www.soinside.com 2019 - 2024. All rights reserved.