常用小Demo：用js/jQuery实现回到页面顶部功能-阿里云开发者社区

常用小Demo：用js/jQuery实现回到页面顶部功能

2017-11-21 1094

简介：

+关注继续查看

HTML代码：

<div class="main">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet debitis, dolore eveniet illo maiores nam neque nesciunt perspiciatis praesentium quaerat qui, quidem rem sequi similique sunt ullam voluptate voluptates!
 
</div>
 
//负责容纳各种按钮，例如“回到页面顶部”，“扫面二维码”等等

<div class="backContainer">

    <a href="#" id="backTop"></a>

</div>

CSS代码：

*{margin:0; padding:0;}

a{color:#000; text-decoration:none;}

.main{width:100%; height:1500px;}

.backContainer{position:fixed; right:40px; bottom:40px;}

#backTop{display:block; width:46px; height:46px; background:url('images/go-top.png') no-repeat 0 -100px;}

#backTop:hover{background-position-y:-150px;}

“回到顶部”按钮及鼠标移入时效果截图：

JS代码：

$('.backContainer').hide();

$(window).scroll(function(){

    //当窗口相对于滚动条顶部的偏移大于150px时，显示跳转按钮，否则不显示

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

        $('.backContainer').fadeIn('slow');

    }else{

        $('.backContainer').fadeOut('slow');

    }
});
//当点击跳转按钮时

$('#backTop').click(function(){

    $('html').animate({

        scrollTop:0

    },1000);
})

scroll([[data],fn]):

当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

$(window).scroll( function() { /* ...do something... */ } );

animate(params,[speed],[easing],[fn])

用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

// 在一个动画中同时应用三种类型的效果

$("#go").click(function(){

$("#block").animate({

width: "90%",

height: "100%",

fontSize: "10em",

borderWidth: 10

}, 1000 );

});

scrollTop([val])

获取匹配元素相对滚动条顶部的偏移, 此方法对可见和隐藏元素均有效。

本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1872718