龙空技术网

利用jQuery实现最快捷的点击按钮返回页面顶部

Cyan4399 251

前言:

目前小伙伴们对“jquery上下按键”都比较关心,你们都需要分析一些“jquery上下按键”的相关内容。那么小编同时在网摘上收集了一些关于“jquery上下按键””的相关文章,希望咱们能喜欢,兄弟们一起来学习一下吧!

实现按钮点击快速回到页面顶部,有多种方法。

在这里我介绍一下jQuery的方法。

jQuery核心代码:

$(".top").click(function() {

$("body,html").animate({

scrollTop: 0

}, 1000);

});

$(window).scroll(function() {

if($(window).scrollTop() > 100) {

$(".top").css("display", "block");

} else {

$(".top").css("display", "none");

}

});

HTML代码:

<div class="top">

快速返回顶部

</div>

CSS:

.top {

position: fixed;

top: 100px;

right: 50px;

display: none;

cursor: pointer;

}

标签: #jquery上下按键