滚动页面时显示html元素

Question

我想要我的＆＃34;回到顶部＆＃34;当用户在网页显示后不立即向下滚动网页的一半时显示按钮。你怎么能用HTML和CSS做到这一点？

元素我希望大约一半出现，然后点击返回顶部：

<a href="#topPage"><img id="upArrow" src="Images/arrow-up.png" alt="Up arrow"></a>

Answer 1

让我知道这是否有效：

编辑：添加动画以将用户返回到顶部.click

<script>
$(window).scroll(function () { 
if ($(window).scrollTop() > $('body').height() / 2) {
$('#upArrow').fadeTo(500, 1);
} 
});

$('#upArrow').click(function(){
$("html, body").animate({ scrollTop: 0 }, "slow");
});
</script>

将upArrow设置为：

<img id="upArrow" style="opacity: 0;" src="Images/arrow-up.png" alt="Up arrow"/>

替代.js：

$(document).ready(function(){

$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 500 // Edit this number to define how far down the page the div fades in.

if(y_scroll_pos > scroll_pos_test) {
$('#upArrow').fadeTo(500, 1);
}
});

});
$('#upArrow').on("click",function(){
$("html, body").animate({ scrollTop: 0 }, "slow");

});