jquery点击缓慢滚动到页面顶部

最新推荐文章于 2024-07-05 10:20:02 发布

大可大可抖

最新推荐文章于 2024-07-05 10:20:02 发布

阅读量1.1k

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/p930318/article/details/94557921

版权

JQuery 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<style>
  body{margin: 0;}
  .btn{    position: fixed;
    bottom: 5px;
    right: 10px;}
</style>

<body>
    <div> 
        JavaScript 也正在成为手机应用的开发语言。一般来说，安卓平台使用 Java 语言开发，iOS 平台使用 Objective-C 或 Swift 语言开发。许多人正在努力，让 JavaScript 成为各个平台的通用开发语言PhoneGap 项目就是将 JavaScript 和 HTML5 打包在一个容器之中，使得它能同时在 iOS 和安卓上运行。Facebook 公司的 React Native 项目则是将 JavaScript 写的组件，编译成原生组件，从而使它们具备优秀的性能Mozilla 基金会的手机操作系统 Firefox OS，更是直接将 JavaScript 作为操作系统的平台语言，但是很可惜这个项目没有成功JavaScript 也正在成为手机应用的开发语言。一般来说，安卓平台使用 Java 语言开发，iOS 平台使用 Objective-C 或 Swift 语言开发。许多人正在努力，让 JavaScript 成为各个平台的通用开发语言PhoneGap 项目就是将 JavaScript 和 HTML5 打包在一个容器之中，使得它能同时在 iOS 和安卓上运行。Facebook 公司的 React Native 项目则是将 JavaScript 写的组件，编译成原生组件，从而使它们具备优秀的性能Mozilla 基金会的手机操作系统 Firefox OS，更是直接将 JavaScript 作为操作系统的平台语言，但是很可惜这个项目没有成功JavaScript 也正在成为手机应用的开发语言。一般来说，安卓平台使用 Java 语言开发，iOS 平台使用 Objective-C 或 Swift 语言开发。许多人正在努力，让 JavaScript 成为各个平台的通用开发语言PhoneGap 项目就是将 JavaScript 和 HTML5 打包在一个容器之中，使得它能同时在 iOS 和安卓上运行。Facebook 公司的 React Native 项目则是将 JavaScript 写的组件，编译成原生组件，从而使它们具备优秀的性能Mozilla 基金会的手机操作系统 Firefox OS，更是直接将 JavaScript 作为操作系统的平台语言，但是很可惜这个项目没有成功
    </div>
 <button class="cler btn">向上</button>
</body>

<script type="text/javascript">
   var newtop;
  $('.cler').on('click',function(){
    var timer=setInterval(function(){
      newtop = $(document).scrollTop();
      if($(document).scrollTop()==0){
        clearInterval(timer);
      }else{
        var a =$(document).scrollTop(newtop -20);
      }
    },10);
   
  });
</script>

这里用到了.scrollTop();方法

这个方法可以设置和获取滚动条的垂直位置。

点击向上按钮获取位置，定时时器中判断滚动条是否是在0 处不是在0处就给滚动条每0.01秒向上20,直至到顶部。

$(document).scrollTop(); // 获取文档对象

$(window).scrollTop(); //获取窗口

大可大可抖

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery点击缓慢滚动到页面顶部

<style> body{margin: 0;} .btn{ position: fixed; bottom: 5px; right: 10px;}</style><body> <div> JavaScript 也正在成为手机应用的开发语言。一般来说，安卓平台使用 Java 语言开发，i...
复制链接

扫一扫

专栏目录