底部中心跳到顶部的按钮

问题描述 投票:0回答:1

我正在创建小的 html 离线页面,以在信息亭模式(没有互联网的小型博物馆)中作为文本面板显示在触摸屏上。我的背景图片是实际的滚动文本面板,我已经弄清楚了那部分。

我想要一个位于页面中央底部的按钮,当访问者触摸它时,它会“跳转”到页面顶部。我试图让按钮定位在页面的底部中心,但我是全新的,无法弄清楚什么代码有效。

我会尝试上传一些图片,说明正在发生的事情、我想要的东西和我的代码。

如果可以的话我会尽量提供图片...

html css image button centering
1个回答
0
投票

我建议将按钮“粘”到视图的顶部,因为在 GoTo 边缘上更直观。您可以通过替换我设置 Top 0

的位置来使用屏幕底部

<!DOCTYPE html><head><meta charset="utf-8" />
<!-- set screen 3000px big to show it functions, and buttons don't play well with center so set the button left offset (will need adjust for a given screen width and font size -->

<style>
a:-webkit-any-link { color: black ; text-decoration: none; font-size: 20px;}
body { height: 3000px ; background-color: #2a3a1f ; color: #fef1f0; font-family: Helvetica, sans-serif; text-align: center;}
button { Left: 300px ; position: fixed; top: 0 ; text-decoration: none; }
</style></head><body>

<button type="button"><a href="#top">Please scroll down for more details, and touch here to return to "Top of Page"</a></button>
<br><h1>Hello Browser, Welcome to the Small Museum</h1>

<div>
Here be many interesting Art & Facts to explore, especially below. 
</div>

</body></html>
© www.soinside.com 2019 - 2024. All rights reserved.