简单几步实现返回顶部效果

今天与大家分享下网页中经常出现的返回顶部效果

相比原生Javascript,jquery实现起来能够省略不少代码。

接下来就直接贴代码啦:

 1 $(function(){
 2        $(window).scroll(function(){ //scroll--浏览器滚动条滚动式触发
 3                 var wHeight=$(window).height(); //获取浏览器可视窗口高度
 4                 var wTop=$(window).scrollTop(); //获取滚动条距离顶部高度
 5                if(wTop>=wHeight)  //当滚动条距离顶部高度超过一屏时执行
 6                 {
 7                      $("#btn").show();  //返回顶部按钮显示
 8                 }
 9                 else{
10                      $("#btn").hide();  //返回顶部按钮隐藏
11                 }
12            });
13            $("#btn").click(function(){
14                     $("html,body").animate({scrollTop:0},500);  //页面500毫秒返回顶部
15            });
16  });

ok,是不是很简单,jquery直接为我们提供的animate方法可以很快实现返回顶部的动画效果。

如果想要更加详细的介绍,可以去观看慕课网的教程:http://www.imooc.com/learn/65

时间: 2024-10-12 20:20:38

简单几步实现返回顶部效果的相关文章

jQuery实现简单而且很酷的返回顶部链接效果

demo: html部分: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="keywords" content=""> <title>返回页面顶部</title&g

js返回顶部效果

当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮,点击它可以使页面返回顶部,用户再也不用滚动滚轮了.下面我总结了集中常用的返回顶部的效果: 方法一(最简单,代码量最少,但是效果有些生硬).代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <

css 返回顶部效果

相对 <div style="height: 300px;margin-top: 200px;border: 4px solid green;position: relative;"> <a style="position: absolute;right: 0;bottom: 0;">返回顶部</a> </div>

HTML页面实现返回顶部效果 go to top

1.首先导入jQuery插件. 2.js代码: $(window).scroll(function () { if($(window).scrollTop()>=100) { $(".backtop").fadeIn(); }else { $(".backtop").fadeOut(); } }); $(".backtop").click(function(event){ $('html,body').animate({scrollTop:

jquery实现返回顶部效果

jQuery("#gotop").css('display','none');jQuery(window).scroll(function(){if(jQuery(this).scrollTop()>100){jQuery("#gotop").fadeIn(1000)}else{jQuery("#gotop").fadeOut(750)}});jQuery("#gotop").click(function(){jQuer

jQuery 返回顶部效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <script src="scripts/jquery-1.7.1.min.js"></script> </head> <body> <script type

简单的返回顶部效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="en"> <head>  <m

原生js,实现“返回顶部”效果

html: <span>^</span> css body{                height: 3000px;            }            span{                display: block;                position: fixed;                bottom: 20px;                right: 10px;                font-size: 60px;

简单返回顶部代码及注释说明

最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好.最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块.当然这就需要结合“返回顶部”功能来取得更好的体验了.当然一般情况下首先还是要避免页面过长,内容薄弱关联性不够的跳出率会很高. 下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 h