JS实现带动画的回到顶部效果

本文实例为大家分享了JS实现带动画的回到顶部效果的具体代码,供大家参考,具体内容如下

实现功能:滚动到页面某一个高度的时候,回到顶部按钮出现。点击之后回到网页顶部,按钮隐藏。
代码如下,jQuery引用的是百度CDN的,因此整段代码复制下来后在浏览器运行即可。

<!DOCTYPE html>
<html> 

  <head>
    <meta charset="UTF-8">
    <title>实现回到顶部功能</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    } 

    .gotop {
      display: none;
      position: fixed;
      bottom: 50px;
      right: 50px;
      width: 40px;
      height: 40px;
      padding: 5px;
      background-color: #F00;
      color: #FFF;
      text-align: center;
      cursor: pointer;
    }
  </style>
  <script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script> 

  <body>
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br />
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br />
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br />
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br />
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br />
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br />
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br />
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br />
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br />
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 

    <div id="goTop" class="gotop">
      <p>回到</p>
      <p>顶部</p>
    </div>
  </body>
  <script>
    function goTop() { 

      $(window).scroll(function() {
        var $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //兼容浏览器
        if($scrollTop > 100) { //滚动高度可调
          $("#goTop").show();
        } else {
          $("#goTop").hide();
        };
      }) 

      $("#goTop").on("click", function() {
        $("body").stop().animate({
          scrollTop: 0
        });
      }) 

    } 

    goTop();
  </script> 

</html> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • js滚动条回到顶部的代码

    虽然平滑性处理的不好,但非常适合学习 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="tex

  • js隐藏与显示回到顶部按钮及window.onscroll事件应用

    现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个"回到顶部"的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适合查看内容的位置. 那么,如何控制"回到顶部"按钮的显示或隐藏呢?其实我们只需要实现window.onscroll 事件即可,代码如下: 复制代码 代码如下: window.onscroll = function () { if (document.documentElement.scrollTop + docume

  • 原生js实现淘宝首页点击按钮缓慢回到顶部效果

    淘宝首页的回到顶部按钮是这样的:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字.点击按钮缓慢回到顶部 我们先分析下实现这样的效果需要添加哪些事件.鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover, mouseout事件.要侦听滚动条的变化,所以需要给window添加scroll事件,点击按钮回到顶部,按钮添加click事件.我们将事件处理程序封装成三个函数moveIn, moveOut, goTop; 下面先给出html/css代

  • 页面回到顶部的三种实现(锚标记,js)

    本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML(http://www.jb51.net/web/62651.html) 锚标记,也可使用Javascript Scroll (http://www.jb51.net/article/31422.htm) 函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即可,总之简约最美的,能减少代码就减少代码,能不调用的就别调用,要不是天缘博客的文章都是牛长也不会添加这个功能. 一.使用锚标记返回页面顶部 使用

  • 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS的回到顶部. HTML代码: <div class="container"> <p>你好哇</p> ... </div> <div id="top">回到顶部</div> CSS代码: .container{ border: 1px

  • 用原生js做个简单的滑动效果的回到顶部

    很多网页在下方都会放置一个"返回顶部"按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美).随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在,于是我也跟跟风,将返回顶部功能做成了滑动效果.后来为了更贴合物理特征, 改造做成了减速的滑动效果. 首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离:再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ... <script type=&

  • 原生JS实现平滑回到顶部组件

    返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 实现思路也很容易,只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可. 本文抛弃所有加速减速的酷炫效果,回归软件的本质,提供一个最简洁的实现,只追求实用性,不追求所谓的用户体验,效果如下 由于思路跟代码都很简单,所以就直接贴出实现细节了: var BackTop = function

  • 实现变速回到顶部的JavaScript代码

    随着近几年来 JavaScript 的应用日渐广泛, 滑动效果无处不在, 于是我也跟跟风, 将置顶功能做成了滑动效果. 后来为了更贴合物理特征, 改造做成了减速的滑动效果. 首先说一下原理吧. 我们会获取滚动条到页面顶部的距离, 然后上移一定的距离; 再获取滚动条到页面顶部的距离, 上移一定的距离 (比上一次小一点); ... JavaScript 代码: 复制代码 代码如下: /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (

  • JS实现带动画的回到顶部效果

    本文实例为大家分享了JS实现带动画的回到顶部效果的具体代码,供大家参考,具体内容如下 实现功能:滚动到页面某一个高度的时候,回到顶部按钮出现.点击之后回到网页顶部,按钮隐藏. 代码如下,jQuery引用的是百度CDN的,因此整段代码复制下来后在浏览器运行即可. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实现回到顶部功能</title> &

  • JS采用绝对定位实现回到顶部效果完整实例

    本文实例讲述了JS采用绝对定位实现回到顶部效果.分享给大家供大家参考,具体如下: <!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"> <head&g

  • 基于JS实现带动画效果的流程进度条

    当在使用流程的时候,比如有一个审核流程,有三个阶段:开始,审核中,审核成功.当在不同的阶段,做相应的进度显示,当显示时,是以动画的形式显示的.话不多说,我们开始打造吧. 首先,我考虑的是使用canvas来打造这个控件,于是我现在demo.html里新建了一个canvas用来显示测试用,并且先预计了几个属性值,在做的过程中增增改改,最终属性如下: <canvas id="myCanvas" width="800" height="100" s

  • jQuery实现回到顶部效果

    本文实例为大家分享了jQuery实现回到顶部效果的具体代码,供大家参考,具体内容如下 动画:通过点击侧栏导航,页面到达相应的位置 jQuery方法:show(), hide(), animate() 动画效果: 代码: <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>回到顶部</title> <script src="D:\jQuery/jquery-3

  • js简单的点击返回顶部效果实现方法

    本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum

  • jquery实现跳到底部,回到顶部效果的简单实例(类似锚)

    实例如下: <!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"> <head> <meta http-equiv="Co

  • iOS实现点击状态栏自动回到顶部效果详解

    前言 大家都知道实现状态栏(statusBar)点击自动回到顶部效果,旨在为用户在浏览界面时提供便利,点击状态栏能够快速回到界面顶部,所以主要针对可以滚动的UIScrollView和其子类UITableVIew和UICollectionView. 这里将从以下几个方面实现该功能. 1.苹果自带功能 分析: 首先,苹果自己已经提供了该功能,往上滑动tabView,点击statusBar,tableView会自动回到初始位置.如下图所示,此时点击statusBar,屏幕最上方显示的将是第一个cell

  • JS实用的动画弹出层效果实例

    本文实例讲述了JS实用的动画弹出层效果的方法.分享给大家供大家参考.具体实现方法如下: <!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"> <

  • js实现带按钮的上下滚动效果

    本文实例讲述了js实现带按钮的上下滚动效果.分享给大家供大家参考.具体实现方法如下: <!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"> <

  • JS简单实现动画弹出层效果

    JS简单实现动画弹出层效果 <!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"> <head> <title>动画弹出层&l

随机推荐