温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何用js和jQuery实现回到页面顶部功能

发布时间:2021-08-29 16:52:12 来源:亿速云 阅读:180 作者:小新 栏目:web开发

这篇文章给大家分享的是有关如何用js和jQuery实现回到页面顶部功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

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('p_w_picpaths/go-top.png') no-repeat 0 -100px;}
#backTop:hover{background-position-y:-150px;}

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

如何用js和jQuery实现回到页面顶部功能  如何用js和jQuery实现回到页面顶部功能

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])

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

感谢各位的阅读!关于“如何用js和jQuery实现回到页面顶部功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI