欢迎走进晋骏科技官网
199-2585-8673

项目开发必备jQuery编写toTop(回到顶部)效果

发布日期: 2019-04-23 11:11:56 阅读量:136次 作者:晋骏科技

今天小编给大家介绍一下如何利用JQuery实现从任意地方返回顶部的功能,现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的功能。下面通过两个例子介绍,它是如何实现的。

方法一:

<a id="totop" href="#顶部的一个ID"></a>

这第一个方法比较简单,就是在超链接中写上“#顶部的ID”就可以实现回到顶部的功能了,不过如果是这种方法的话就不会出现那种滑动的效果,交互性不太好。

下面在介绍一种可以实现滑动的回到顶部功能,并且可以自己设置滑动的速度和回到顶部的位置等。推荐大家用这种模式实现回到顶部的功能,下面来实现的例子。

方法二:

$(document).on('click', '#totop', function(){

        $("html,body").animate({scrollTop: 0}, 500);

});

$(window).scroll(function(){

        var st = $(document).scrollTop();

        var totop = $('#totop');

        if(st > 400){

               totop.css({display: 'block'});

        }else{

               if (totop.is(":visible")) {

                       totop.hide();

               }

        }

});

通过写一段jquery代码就可以实现回到顶部的功能了,是不是特别简单啊。



此文章均为本站原创,转载请注明来自晋骏科技