css 为什么每次重新加载网站时页面都会立即向下滚动？另外，我该如何把“关于我”放得更低？

3lxsmp7m 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(244)

所以我添加了平滑滚动和一个按钮，滚动到底部，这就是重点，但现在每次我加载和重新加载网站等。它会自动向下滚动我还想把“关于我”标题进一步下降，所以它是不可见的，除非你点击“点击了解更多”
网站图片：https://i.gyazo.com/79313e6ee1fe3de82d18b33f238ac5d9.jpg

<div class="banner">
        <div class="navbar">
            <img src="logo.png" class="logo">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About me</a></li>
                <li><a href="#">Samples</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
<div class="content">           
    <h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>

<div class="About">
    <a href="#down"><button type="button"><span></span><b>CLICK TO LEARN MORE</button></a>
        <div id="down">
            <h1>About me</h1>
        </div>

css

来源：https://stackoverflow.com/questions/73400556/why-does-my-page-instantly-scroll-down-each-time-i-reload-the-site-also-how-can

2条答案

按热度按时间

lo8azlld1#

1.我不明白你想说什么，提供CSS方便理解你的问题。
1.将#down设置为默认的display: none，然后添加脚本（参见我的代码），并在button元素中添加onclick="show()"，

<html>
<head>
    <title>Intriguing Copy</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="banner">
        <div class="navbar">
            <img src="logo.png" class="logo">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About me</a></li>
                <li><a href="#">Samples</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
<div class="content">           
    <h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>

<div class="About">
    <a href="#down"><button type="button" onclick="show()"><span></span><b>CLICK TO LEARN MORE</button></a>
        <div id="down">
            <h1>About me</h1>
        </div>
        <script>
            function show() {
                document.getElementById("down");
                down.style.display = "block";
            }
        </script>
  </body>
</html>

赞(0）回复(0）举报 2023-05-30

sxissh062#

这一

<a href="#down"><button type="button"><span></span><b>CLICK TO LEARN MORE</button></a>

是无效的-你不能像那样嵌套交互元素。要么使用按钮，要么使用锚。
如果你的页面是自动滚动的，我会假设你在点击这个锚后重新加载页面。我猜想，如果您查看浏览器的导航栏，它将以#down结尾，如

https://whateveryourdomain.is/somepage.html#down

这就是page anchors的工作原理--浏览器将尝试滚动页面，直到匹配的锚标记或id'd元素位于视口的顶部。

赞(0）回复(0）举报 2023-05-30

我来回答

css 为什么每次重新加载网站时页面都会立即向下滚动？另外，我该如何把“关于我”放得更低？

2条答案

相关问题

热门标签

最新问答