jquery-返回顶部

我看到了这个提琴样品

我想当“到顶端”出现时，点击一下！应该平稳或缓慢地滚动到顶部

$(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#toTop').fadeIn();
    } else {
        $('#toTop').fadeOut();
    }
});

---

现场演示、完整脚本和教程可在此查看-

首先让我们创建按钮

<a href="#" class="scrollToTop">Scroll To Top</a>

现在我们可以用下面的CSS设置按钮的样式

<style>
.scrollToTop{
    width:100px; 
    height:130px;
    padding:10px; 
    text-align:center; 
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    bottom:75px;
    right:40px;
    display:none;
    background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
    text-decoration:none;
}
</style>

.scrollToTop{
宽度：100px；
高度：130像素；
填充：10px；
文本对齐：居中；
背景：白烟；
字体大小：粗体；
颜色：#444；
文字装饰：无；
位置：固定；
底部：75px；
右：40px；
显示：无；
背景：url（'arrow_up.png'）不重复0px 20px；
}
.scrollToTop:悬停{
文字装饰：无；
}

在Javascript文件中复制并粘贴以下内容以添加Javascript功能

<script>
$(document).ready(function(){
    
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});
</script>

$（文档）.ready（函数（）{
//检查窗口是否在顶部，如果不是，则显示按钮
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>100）{
$（'.scrollToTop'）.fadeIn（）；
}否则{
$（'.scrollToTop'）.fadeOut（）；
}
});
//单击事件以滚动到顶部
$（'.scrollToTop'）。单击（函数（）{
$（'html，body'）.animate（{scrollTop:0}，800）；
返回false；
});
});

---

哇-这应该是正确的答案。言简意赅！我对这件事的复杂化感到惊讶。

<a href="#" class="scrollToTop">Scroll To Top</a>

<style>
.scrollToTop{
    width:100px; 
    height:130px;
    padding:10px; 
    text-align:center; 
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    bottom:75px;
    right:40px;
    display:none;
    background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
    text-decoration:none;
}
</style>

<script>
$(document).ready(function(){
    
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});
</script>

       $(window).on("scroll",function() {
        if ($(this).scrollTop() > 50 ) {
            $('#toTop').fadeIn(400);
        } else {
            $('#toTop').fadeOut(400);
        }
    });

    $("#toTop").on("click",function() {
        $("html, body").animate({scrollTop: 0}, 1200);
     });