css 如何使按钮转到另一页的中间

axkjgtzd  于 2022-12-27  发布在  其他
关注(0)|答案(2)|浏览(170)

我不会添加代码,但我需要使我的按钮不只是去到另一个页面,但去到页面的中间部分。就像我希望按钮导致一个向下滚动的页面。有人知道该怎么做吗?

x7rlezfr

x7rlezfr1#

在页面的div中添加id,例如<div id="hello">some thing here</div>,在按钮上,您可以使用<button><a href="#hello">scroll</a></button>
我假设只是想让你的按钮向下滚动到页面的一部分。如果我错了,然后评论我会根据它编辑答案。

#hello{
margin-top:20px;
margin-bottom:500px;
}
.height{
height:500px;
}
html{
scroll-behavior:smooth;
}
<div>
<button>
<a class="scroll" href="#hello">scroll</a>
</button>
<div class="height">
</div>
<div  id="hello">Hello</div>
</div>
8yparm6h

8yparm6h2#

我相信实现这一点最简单的方法是创建一对标签,一个用于按钮,另一个在所需的目的地不可见。

<body>
    <div id="header">
        <h1>Title</h1>
    </div>
    <div class="outer">
        <div class="inner">
            <a href="#third"><button>Go To 3rd Section</button></a>
            <h1>My First Heading</h1>
            <p>My first paragraph.</p>
        </div>
        <div class="inner">
            <h1>My Second Heading</h1>
            <p>My second paragraph.</p>
        </div>
        <div class="inner">
            <a id="third"></a>
            <h1>My Third Heading</h1>
            <p>My third paragraph.</p>
        </div>
    </div>
</body>

在为你的应用程序应用了合适的css之后,这将是一个链接到页面特定部分的非常简单的方法。目标'a'标记有一个指定的id
第一个月
而 Package 在"a"标签内的对应按钮具有指向特定ID的href
<a href="#destination"><button>Destination</button></a>.
希望这能回答你的问题!

相关问题