开发者社区> 技术小牛人> 正文

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

简介:
+关注继续查看

HTML代码:

1
2
3
4
5
6
7
8
9
<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代码:

1
2
3
4
5
6
*{margin:0padding:0;}
a{color:#000text-decoration:none;}
.main{width:100%height:1500px;}
.backContainer{position:fixedright:40pxbottom:40px;}
#backTop{display:blockwidth:46pxheight:46pxbackground:url('images/go-top.png'no-repeat 0 -100px;}
#backTop:hover{background-position-y:-150px;}


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

wKiom1gpd6fyuIxpAAAD0PxqpD8101.png  wKiom1gpd7iwYTTzAAADFyagCnU525.png


JS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('.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



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS/jQuery图片预览,支持旋转-放大-放小-全屏,例子demo
JS/jQuery图片预览,支持旋转-放大-放小-全屏,例子demo
126 0
jQuery案例demo -- 鼠标移入显示蒙版
效果展示 效果展示.png HTML代码: 摄影小白成长记 The best preparation for tomorrow is doing your best today.
960 0
+关注
技术小牛人
文章
问答
视频
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
在 IoT 设备进行 JavaScript 开发的探索之路
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多