`
maria3905
  • 浏览: 22769 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

js在html页面回到顶部的做法

    博客分类:
  • js
 
阅读更多

效果图

 先引入js

<script type="text/javascript" src="${contextPath}js/common/returnTop.js"></script>

lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("full").style.top=parseInt(document.getElementById("full").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
suspendcode="<div id=\"full\" style='right:2px;POSITION:absolute;TOP:600px;z-index:100'><a onclick='window.scrollTo(0,0);'><img src='../img/www/top.png'></img></a><br></div>"
document.write(suspendcode);
window.setInterval("heartBeat()",1);

 
 


 

  • 描述: top.png
  • 大小: 3.7 KB
分享到:
评论

相关推荐

    通过HTML标记或JS代码实现跳转返回页面顶部

    下面我们将介绍三种实现返回页面顶部的方法,分别是使用 HTML 锚标记、使用 Javascript Scroll 函数和使用 Onload 加上 scroll 功能实现动态返回顶部。 一、使用 HTML 锚标记返回页面顶部 使用 HTML 锚标记是实现...

    利用js实现返回页面顶部

    用户在浏览页面底部后,能够快速返回顶部,提高了用户体验。本文将详细讲解如何使用JavaScript来实现这一功能。 首先,我们需要创建一个"返回顶部"的按钮或者链接,通常这个按钮会出现在页面的右下角或左下角。HTML...

    JS实现部分HTML固定页面顶部随屏滚动效果

    本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果。分享给大家供大家参考,具体如下: 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了,那么...

    回到顶部JavaScript插件

    2. **DOM操作**:首先,你需要在HTML中创建一个元素作为返回顶部的按钮,然后通过JavaScript获取这个元素并添加到合适的位置,如页面的角落。这通常通过`document.querySelector()`或`document.getElementById()`等...

    js+css实现回到顶部按钮(back to top).docx

    首先,我们需要在HTML中添加一个id为"back-to-top"的p元素,并在其中添加一个a标签,href属性设置为"#top",表示回到页面的顶部。 在CSS中,我们需要设置p#back-to-top的样式,使其固定在页面的右下角,并设置a标签...

    模仿天猫的返回顶部HTML JS CSS JQuery

    在网页设计中,"返回顶部"功能是一个常见且实用的设计元素,它允许用户轻松地将浏览页面滚动到顶部,提供良好的用户体验。本项目是模仿天猫网站的返回顶部效果,使用了HTML、JavaScript(JQuery)、CSS这三种核心...

    js动态返回顶部

    总之,“js动态返回顶部”是一个实用的网页交互功能,它利用JavaScript和DOM操作实现了用户友好的体验,使得用户在浏览长页面时能方便地回到页面顶部。通过理解和实现这样的功能,可以进一步提升对JavaScript和网页...

    JS 简单的点击返回顶部的功能

    在JavaScript编程中,"点击返回顶部"功能是一个常见的交互设计,它允许用户通过单击一个按钮迅速滚动到页面的顶部,提升用户体验。本教程将详细解释如何实现这一功能。 首先,我们需要在HTML中创建一个返回顶部的...

    小火箭回到顶部demo页面

    【小火箭回到顶部demo页面】是一个专为网页设计者和开发者提供的示例项目,它主要展示了如何在网页中实现一个类似“小火箭”效果的回到顶部功能。这种设计常见于许多网站,特别是在用户滚动页面较长内容时,点击一个...

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

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

    返回顶部JS代码

    返回顶部的JS代码是网页设计中常见的一种交互功能,它允许用户在浏览长页面时,通过点击一个按钮轻松地返回页面顶部,提升用户体验。这个功能通常会在用户滚动页面到一定距离,即滚动条超出屏幕范围时自动显示。下面...

    页面不在顶部时则右边显示返回顶部按钮否则不现实

    "页面不在顶部时则右边显示返回顶部按钮否则不现实"这个设计思路正是为了提升用户在浏览长页面时的便捷性。返回顶部的功能是一个常见且实用的交互元素,它允许用户快速地将浏览器滚动到页面的起始位置,而无需手动...

    百度返回顶部JS源代码+返回顶部图片

    在网页设计中,"返回顶部"功能是一个常见且实用的设计元素,它可以帮助用户快速地将浏览器滚动条定位到页面的顶部,特别是在浏览长篇内容时。这个功能的实现通常涉及JavaScript(JS)脚本和相应的视觉元素,如按钮或...

    js 网页返回顶部 置顶返回

    在网页设计中,"js 网页返回顶部 置顶返回" 是一个常见的功能需求,它允许用户轻松地将浏览器滚动到页面的顶部,提高用户体验。这一功能主要通过JavaScript实现,因为JavaScript是一种强大的客户端脚本语言,可以与...

    JS返回顶部代码

    在这个“JS返回顶部代码”中,我们将探讨如何利用JavaScript实现一个简单的功能,即当用户在浏览网页时,点击按钮能够使页面瞬间回到顶部。 返回顶部的功能在许多网站上都能看到,它通常以一个小图标或者文字形式...

    js简洁客服和返回顶部右侧漂浮代码,有动画效果,兼容主流浏览器

    在前端开发中,创建用户友好的交互体验是至关重要的,而"js简洁客服和返回顶部右侧漂浮代码,有动画效果,兼容主流浏览器"正是针对这一需求的解决方案。这个项目结合了JavaScript(js)、ECMAScript(ECMAScript是...

    页面点击回到顶部代码

    在网页开发中,为了提高用户体验,经常会在页面中加入一个“回到顶部”的功能。当用户滚动到页面一定距离后,“回到顶部”按钮会显示出来,点击该按钮可以快速将页面滚动至顶部。这种功能对于长页面来说非常实用。 ...

    JS火箭返回顶部

    总的来说,"JS火箭返回顶部"是利用JavaScript和HTML实现的一种网页交互设计,它不仅提供了实用的导航功能,还通过动画效果增强了用户体验。对于前端开发者来说,理解和实现这样的功能有助于提升网页的互动性和吸引力...

    JS CSS 回到顶部

    在这个"JS CSS实现回到顶部代码"的主题中,我们将探讨如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 来创建这样一个功能。 首先,我们需要在HTML中添加一个元素,作为回到顶部的触发器。这个元素可以是...

    JavaScript回到顶部功能实现

    在网页设计中,"回到顶部"功能是一个常见且实用的元素,它允许用户快速返回页面的顶部,提高用户体验。本文将详细介绍如何使用JavaScript实现这一功能。 首先,我们可以在HTML中创建一个"回到顶部"的按钮,通常将其...

Global site tag (gtag.js) - Google Analytics