gpt4 book ai didi

html - 需要帮助将滚动条居中到页面顶部 anchor 链接

转载 作者:行者123 更新时间:2023-11-28 01:17:03 25 4
gpt4 key购买 nike

我正在尝试使一个 anchor 元素居中,该 anchor 元素会在页面向下 100 像素时出现一个弹出窗口,并将您带回到页面顶部。但是每当我尝试将它居中或在 CSS 中删除它的底部和右侧填充标签时,当我滚动超过 100px 时它就不会出现

$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 100) {
$('#back2Top').fadeIn();
} else {
$('#back2Top').fadeOut();
}
});
$(document).ready(function() {
$("#back2Top").click(function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});

});
#back2Top {
width: 40px;
line-height: 40px;
overflow: hidden;
z-index: 99;
display: none;
cursor: pointer;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
position: fixed;
bottom: 50px;
right: 0;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 30px;
text-decoration: none;
border-radius: 50%;
padding-bottom: 3px;
}

#back2Top:hover {
background-color: #ddd;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>sample</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a id="back2Top" title="Back to top" href="#">&#10148;</a>
</body>

最佳答案

我不清楚你的情况。如果你想让 a 居中。你可以给 right 50% 让它保持在中间。

$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 100) {
$('#back2Top').fadeIn();
} else {
$('#back2Top').fadeOut();
}
});
$(document).ready(function() {
$("#back2Top").click(function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});

});
#back2Top {
width: 40px;
line-height: 40px;
z-index: 99;
display: none;
cursor: pointer;
transform: rotate(270deg);
position: fixed;
bottom: 50px;
right: calc(50% - 15px);
left: calc(50% - 15px);
background-color: #333;
color: #ddd;
text-align: center;
font-size: 30px;
text-decoration: none;
border-radius: 50%;

}

body{
height:1200px
}

#back2Top:hover {
background-color: #ddd;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>sample</h1>
<a id="back2Top" title="Back to top" href="#">&#10148;</a>
</body>

关于html - 需要帮助将滚动条居中到页面顶部 anchor 链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51761046/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com