`
jsntghf
  • 浏览: 2532806 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

返回页面顶部的JS特效

JavaScript 
阅读更多

一个很贴心的小功能，返回页面顶部，很多网站都有。一个文字或者图片链接，点击这个链接后就会自动跳到该页面的顶部。

 

常用的方法是在body标签添加一个标记。

 

<body>   
<a name="top">

 

然后在需要的地方添加链接即可。

<a href="#top">返回</a>

 

还有更简单的，一个空标记就可以返回顶部。

 

<a href="#">返回顶部</a>

 

现在提供一个带效果的返回顶部的代码。

 

<script type="text/javascript">
  var goto_top_type = -1;   
  var goto_top_itv = 0;   
   
  function goto_top_timer()   
  {   
    var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;   
    var moveby = 15;   
   
    y -= Math.ceil(y * moveby / 100);   
    if (y < 0) {   
      y = 0;   
    }   
   
    if (goto_top_type == 1) {   
      document.documentElement.scrollTop = y;   
    }   
    else {   
      document.body.scrollTop = y;   
    }   
   
    if (y == 0) {   
      clearInterval(goto_top_itv);   
      goto_top_itv = 0;   
    }   
  }   
   
  function goto_top()   
  {   
    if (goto_top_itv == 0) {   
      if (document.documentElement && document.documentElement.scrollTop) {   
        goto_top_type = 1;   
      }   
      else if (document.body && document.body.scrollTop) {   
        goto_top_type = 2;   
      }   
      else {   
        goto_top_type = 0;   
      }   
   
      if (goto_top_type > 0) {   
        goto_top_itv = setInterval('goto_top_timer()', 50);   
      }   
    }   
  }   
</script>

 

然后再在适当的地方添加如下的链接：

 

<a href="javascript:void(0)" onclick="goto_top()">返回页顶</a>
分享到：
| 自动语法高亮－SyntaxHighlighter
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS鼠标点击下端返回顶部特效.zip

    总之，JS鼠标点击下端返回顶部特效是通过JavaScript实现的一个实用功能，它提高了长页面的用户体验，让用户可以轻松快捷地返回页面顶部。理解并掌握这种技术对于前端开发者来说是至关重要的，因为它能够提升网站的...

    仿淘宝返回顶部jquery特效

    【仿淘宝返回顶部jQuery特效】是一种常见的网页交互设计，它为用户提供了一种便捷的方式，能够快速将滚动条返回页面顶部，提升用户体验。尤其在内容丰富的长页面中，这种功能尤为重要。在网页设计中，这种效果通常会...

    jQuery冲天火箭返回顶部动画特效.zip

    动画的结束位置通常是浏览器的顶部，表示已成功返回页面顶部。速度的定制可以通过调整`animate()`函数中的`duration`参数来实现，单位通常是毫秒。 此外，考虑到兼容性和性能优化，开发者可能还会使用现代浏览器的...

    带平滑效果的js返回顶部特效.zip

    这个“带平滑效果的js返回顶部特效”就是一种创新的实现方式，旨在为用户带来更加流畅和舒适的浏览体验。下面将详细介绍这个特效的实现原理、主要技术点以及如何在实际项目中应用。 首先，我们来解析这个特效的核心...

    返回顶部【超炫】jquery特效

    在网页设计中，"返回顶部"功能是一种常见且实用的设计元素，它允许用户轻松地将浏览页面滚动回页面顶部，而无需手动滑动鼠标或触摸屏幕。jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了JavaScript编程，为...

    jQuery火箭返回顶部动画特效.zip

    jQuery火箭返回顶部动画特效就是一种创新且吸引用户的实现方式，它利用jQuery库，通过动态的火箭升空动画，使得用户在浏览长页面时能够轻松返回页面顶部。本文将深入探讨这个特效的实现原理、核心代码以及如何自定义...

    jQuery返回顶部特效，网页右下角的回到顶部按钮

    这种功能允许用户在浏览页面时，点击位于页面右下角的一个按钮，快速将滚动条返回到页面顶部，提供便捷的用户体验。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，使得开发此类...

    jquery网页右下角返回页面顶部或者底部特效.zip

    标题 "jquery网页右下角返回页面顶部或者底部特效.zip" 提供了我们即将讨论的核心内容：一个使用jQuery实现的网页功能，允许用户轻松地从页面的右下角回到顶部或底部。这个功能对于长页面浏览体验尤其有用，因为它...

    真正超高度出现仿淘宝返回顶部jquery特效

    在本特效中，jQuery被用来监听用户的滚动行为，当页面滚动到一定高度时，返回顶部的按钮会自动显示，提供给用户一个便捷的返回页面顶部的途径。 实现这个特效的基本步骤如下： 1. **创建HTML元素**：首先，在页面...

    jquery网页右下角返回页面顶部或者底部特效

    为了提高用户浏览网页的便利性，许多网站会添加各种交互式功能，其中“返回页面顶部”或“返回页面底部”的特效就是一个常见且实用的设计。这个特效允许用户在浏览长篇内容时，通过点击页面右下角的按钮轻松地回到...

    实现返回顶部和底部的Jquery特效

    首先，为返回顶部的按钮添加点击事件监听器，当用户点击该按钮时，使用`animate`方法平滑滚动到页面顶部： ```javascript $(document).ready(function() { $("#backToTop").click(function() { $("html, body")....

    带返回顶部按钮的固定网页右侧悬浮菜单特效

    这样的设计使得用户在浏览长页面时能轻松地访问导航菜单，同时方便他们快速回到页面顶部。下面将详细介绍这个"带返回顶部按钮的固定网页右侧悬浮菜单特效"的知识点。 首先，我们来理解这个特效的基本组成部分： 1....

    jQuery实现带返回页面顶部qq和微信二维码特效源码.zip

    该压缩包文件“jQuery实现带返回页面顶部qq和微信二维码特效源码.zip”包含了一个使用jQuery库实现的网页交互功能，特别关注的是页面顶部的返回按钮以及二维码展示效果，适用于那些希望在自己的网站上集成此类功能的...

    回到顶部火箭特效

    标题“回到顶部火箭特效”指的是在网页设计中一种常见的交互元素，它允许用户通过点击一个图标或按钮快速返回页面的顶部。这种效果通常被设计成火箭发射的形象，以增加用户体验的趣味性和互动性。火箭升空的动画效果...

    div css3样式表制作jquery返回顶部特效

    在网页设计中，"div css3样式表制作jquery返回顶部特效"是一个常见的需求，它能够提升用户体验，使得用户在浏览长页面时能快速返回页面顶部。这个主题涉及到三个主要技术：HTML的`div`元素、CSS3样式以及jQuery库。 ...

    弹性返回顶部JS代码.rar

    标题中的“弹性返回顶部JS代码”指的是一个JavaScript特效，它允许用户在浏览长网页时，通过点击一个按钮轻松地返回页面顶部。这个功能通常被设计为一个浮动图标，随着用户滚动页面，它会出现在页面的某个角落，如右...

Magicbox
Global site tag (gtag.js) - Google Analytics