当前位置: 首页 > news >正文

Jquery scrollTop animate 實現動態滾動到頁面頂部

這個方法之前都是用的錨點實現的,但是效果僵硬,動感不足!

之後參考了一些網站,發現都是用的js,於是自己想到用jquery 來做一個插件也來實現以下這個小功能。

         $.fn.backTop = function (options) {/*back & scroll to top */
            var defaults = {
                speed : 1000 //滾動到頂部的速度設置 單位是毫秒
                ,mouseEvent: "click"//事件觸發類型
                ,scrollTop:600 //配置滾動多少距離後出現“top”按鈕
                ,callback:function() {//animate(css,speed,callback);中的callback
                    alert(1);
                }
                ,initScroll: function () {
                    $(window).bind('scroll',function () {
                        var top = $(this).scrollTop();
                        if(top>=options.scrollTop) {//配置滾動多少距離後出現“到頂部”按鈕
                            $("#backTop").fadeIn(500);return false;
                        } else {
                            $("#backTop").fadeOut(500);return false;
                        }
                    })
                }
            }
            ,options = $.extend(defaults,options);
            options.initScroll();//實現滾動到一定文職自動出現“到頂部”按鈕
            return this.each(function () {
                var $this = $(this);
                $this.bind(options.mouseEvent,function(e){
                    if(/webkit/.test(navigator.userAgent.toLowerCase())){
                        var dom = $("body");//如果是webkit內核的瀏覽器,滾動條是body
                    } else {
                        var dom = $("html");//否則滾動條是html
                    }
                    dom.animate({scrollTop:"0"},options.speed,function () {
                        options.callback();
                    });
                    e.stopPropagation();
                })
            })
        }

調用方法:

$("#back-top").backTop({
    "scrollTop": 600
    ,"speed":600
    ,callback:function () {
         /*回到頂部後的處理函數*/
    }
});

 

 

转载于:https://www.cnblogs.com/Zell-Dinch/p/4257695.html

相关文章:

  • 多站点IIS用户安全权限设置图解教程
  • c#将http调用返回额json中的有关中文的unicode转换为中文(转)
  • 断点续传
  • T-SQL查询进阶--变量
  • cocos2dx触屏响应(单点触摸)CCTouchBegan,CCTouchMove,CCTouchEnd
  • JQuery上传插件Uploadify API详解
  • c#鼠标在控件上面,然后显示文字
  • 什么是 ADO.NET?
  • [leetcode] Multiply Strings
  • 微信公众平台开发学习笔记1--验证服务器地址的有效性
  • jquery uploadify上传文件插件导致浏览器崩溃问题解决方法
  • Swift语言实战晋级-第9章 游戏实战-跑酷熊猫-5-6 踩踏平台是怎么炼成的
  • FireDAC 之FDMetaInfoQuery
  • GIT操作笔记
  • DevExpress随笔系列
  • 11111111
  • chrome扩展demo1-小时钟
  • express + mock 让前后台并行开发
  • js操作时间(持续更新)
  • rc-form之最单纯情况
  • Travix是如何部署应用程序到Kubernetes上的
  • Vue官网教程学习过程中值得记录的一些事情
  • webpack入门学习手记(二)
  • 关于for循环的简单归纳
  • 回流、重绘及其优化
  • 快速体验 Sentinel 集群限流功能,只需简单几步
  • 它承受着该等级不该有的简单, leetcode 564 寻找最近的回文数
  • 提醒我喝水chrome插件开发指南
  • 微服务核心架构梳理
  • 一份游戏开发学习路线
  • elasticsearch-head插件安装
  • 格斗健身潮牌24KiCK获近千万Pre-A轮融资,用户留存高达9个月 ...
  • ​ 全球云科技基础设施:亚马逊云科技的海外服务器网络如何演进
  • #14vue3生成表单并跳转到外部地址的方式
  • #大学#套接字
  • #我与Java虚拟机的故事#连载13:有这本书就够了
  • $(function(){})与(function($){....})(jQuery)的区别
  • (02)vite环境变量配置
  • (12)Hive调优——count distinct去重优化
  • (JSP)EL——优化登录界面,获取对象,获取数据
  • (Matlab)使用竞争神经网络实现数据聚类
  • (第9篇)大数据的的超级应用——数据挖掘-推荐系统
  • (多级缓存)缓存同步
  • (附源码)spring boot火车票售卖系统 毕业设计 211004
  • (附源码)springboot 基于HTML5的个人网页的网站设计与实现 毕业设计 031623
  • (算法)Travel Information Center
  • (转)Unity3DUnity3D在android下调试
  • .net 8 发布了,试下微软最近强推的MAUI
  • .Net Core缓存组件(MemoryCache)源码解析
  • .net wcf memory gates checking failed
  • .NET 回调、接口回调、 委托
  • .net 写了一个支持重试、熔断和超时策略的 HttpClient 实例池
  • .NET分布式缓存Memcached从入门到实战
  • .NET使用存储过程实现对数据库的增删改查
  • :“Failed to access IIS metabase”解决方法