博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简单的JQuery top返回顶部
阅读量:4363 次
发布时间:2019-06-07

本文共 937 字,大约阅读时间需要 3 分钟。

一个最简单的JQuery Top返回的代码,Mark一下:

 

HTML如下:

TOP

CSS样式:(随意修改样式)

#backtop{
display: none; position: fixed; right: 50px; bottom: 110px; }#backtop a{
display: block; padding: 10px 5px; background:#59b524; color: #fff; font-size: 16px; font-weight: bold; } #backtop a:hover{
background:#439b11; }

最关键的来了,JQuery如下:

$(function(){    //当滚动条的位置大于距顶部0像素时,跳转链接出现,否则消失     $(function () {                 $(window).scroll(function(){                        if ( $(window).scrollTop()>0){                 $("#backtop").fadeIn(1200);            }            else            {                $("#backtop").fadeOut(1200);            }        });        //当点击跳转链接后,回到页面顶部位置         $("#backtop a").click(function(){             $('body,html').animate({scrollTop:0},800);            return false;        });            });});

OK。搞定!

 

转载于:https://www.cnblogs.com/rainy0496/p/4745345.html

你可能感兴趣的文章
HDU 2188------巴什博弈
查看>>
tp5任务队列使用supervisor常驻进程
查看>>
Xmind?
查看>>
spring+quartz 实现定时任务三
查看>>
day2-三级菜单
查看>>
linux下升级4.5.1版本gcc
查看>>
Beanutils
查看>>
FastJson
查看>>
excel4j
查看>>
Thread
查看>>
char * 与char []探究理解
查看>>
QT窗体显示在屏幕中间位置
查看>>
emmet使用技巧
查看>>
RPC-Thrift(二)
查看>>
MSSQL for Linux 安装指南
查看>>
【Golang 接口自动化08】使用标准库httptest完成HTTP请求的Mock测试
查看>>
前端必读:浏览器内部工作原理
查看>>
Uri、URL和URN三者的区别
查看>>
数据字典的转换
查看>>
单例对象的创建与销毁
查看>>