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

2024-12-07 23:35:40

本文实例为大家分享了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>

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

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

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

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

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

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

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

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

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

相关推荐

随机推荐