JavaScript 滚动条看起来不像它应该的样子
海多克
我有一个完美的滚动到页面顶部的按钮工作，在我的 html 文件中有一个脚本标签。
从那以后，我将文件名更改为 Home.php 并且标签仍然按其应有的方式工作，即用户在页面上向下滚动时立即出现的按钮，但它现在填满了页面的整个底部，而不仅仅是出现在右下角。
在 Home.html 中它应该是什么样子：
然而，这是现在在 Home.php 中的样子：
Scrollbar.js 文件
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
以及 Home.php 中的代码片段
<body>
<script type="text/javascript" src="Javascript/ScrollBar.js"></script> <!-- This is linking to my external JavaScript code for the scroll to top of the page button -->
<script type="text/javascript" src="SlideShow.js"></script> <!-- Linking to my external Javascript code for the top middle image slideshow-->
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="cf show-grid">
<div class="row">
<div class="grid-full">
<a href="Index.html"><img class="Logo" src="Images/TLogo.png" alt="Website Logo"></a>
</div>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
CSS：
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #eee; /* Set a background color */
color: black; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
color: white; /* Text color */
}
艾伦·杰巴拉吉
我猜一些 CSS 样式覆盖了#myBtn.
尝试将以下 CSS 添加到按钮并检查。
#myBtn {
width: auto;
left: auto;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Android 应用程序图标看起来不像它应该的样子
- 2
为什么我的滚动条看起来很古怪？
- 3
为什么我的滚动条看起来很古怪？
- 4
Javascript Array 看起来像它的空但有一个值
- 5
为什么我的tkinter水平滚动条在右下角被挤压，但垂直滚动条看起来正常？
- 6
JavaFX：如何在 TableView 中设置滚动条的样式，使其看起来像标准的 Windows 滚动条？
- 7
如何使表格滚动条在 windows 和 mac 中看起来相同
- 8
为什么我的CSV看起来不像我需要的样子？
- 9
CAPTCHA看起来不像我在Joomla中的联系表中应有的样子
- 10
Node.js & Mocha/Should (JavaScript, ES6)：代码虽然看起来应该执行但没有执行
- 11
在javascript中创建看起来正常的分布模式？
- 12
JavaScript-调用看起来很有趣
- 13
JavaScript：使用await使asnyc代码看起来更加同步
- 14
JavaScript-调用看起来很有趣
- 15
Javascript滚动条，移至底部
- 16
Django：看起来不像模块路径
- 17
CSV文件看起来不像表格
- 18
从16.04升级后，为什么Ubuntu 17.10看起来不像它
- 19
滚动条内部固定100％div，不含Javascript
- 20
JavaScript：获取窗口宽度减去滚动条宽度
- 21
使用JQuery / Javascript检测垂直滚动条是否存在
- 22
JavaScript .toggle-垂直滚动条上升了吗？
- 23
如何使用JavaScript使此滚动条正常工作
- 24
JavaScript：获取窗口宽度减去滚动条宽度
- 25
Javascript将滚动条设置为容器的底部
- 26
如何在JavaScript中控制滚动条？
- 27
Javascript文件与PHP文件中的滚动条混淆
- 28
为什么IONIC推送通知看起来像Javascript警报？
- 29
为何流行的JavaScript运行时无法处理看起来像同步的异步脚本？
我来说两句