javascript 回到顶部效果的实现

最新推荐文章于 2024-06-19 14:45:15 发布
最新推荐文章于 2024-06-19 14:45:15 发布
阅读量71 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/guangzhou11/p/7486420.html
版权

 

 

 

demo.js

 

 

window.οnlοad=function() {
    var timer=null;
    var obtn=document.getElementById('btn');
    var isTop=true;
    window.οnscrοll=function() {
        if(!isTop) {
            clearInterval(timer);

        }
        isTop=false;
    }

    obtn.οnclick=function () {
        timer=setInterval(function(){
            var osTop=document.documentElement.scrollTop||document.body.scrollTop;
            var ispeed=Math.floor(-osTop/5);
            document.documentElement.scrollTop=document.body.scrollTop-=osTop+ispeed;
            isTop=true;
            
            if(osTop==0) {
                clearInterval(timer);
            }

        },30);

    }

}

 

demo.css

 

.box {
    width:1190px;
    margin:  0  auto;
}
#btn {
    width:40px;
    height: 40px;
   position:fixed;
    left:50%;
    bottom:30px;
    background:url(顶部.png)  no-repeat  left top ;
    margin-left: 610px;
}
#btn:hover {
    background:url(顶部.png)  no-repeat  left -40px ;
}

 

　　demo.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回到顶部</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div  class="box">
    <img   src="背景.jpg"/>
</div>
<a href="javascript:;"  id="btn"  title="回到顶部"></a>
</body>
</html>

 效果：

 

　　

 

 

 

 

 

 

转载于:https://www.cnblogs.com/guangzhou11/p/7486420.html

初仔仔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现点击回到顶部的实例
weixin_47982238的博客
08-09 205
top.jpg实例一：利用锚点回到顶部 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>index</title> <style> *{ font-family: 微软雅黑; margin:0px; padding:0px;
javascript 回到顶部效果的实现代码
10-26
本篇文章主要是对javascript 回到顶部效果的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
JS 实现返回顶部的效果——百分百可以！！！
qq_43312337的博客
04-28 634
JS 实现单击返回顶部的效果 小伙伴们平常去浏览网页可能都发现，滚动到一定程度都会出现返回顶部的按钮，方便用户来一键返回，从而来提高用户的体验感。今天我们来讲下它的实现原理。 上代码   我这里列出了两种方法，第一种是使用 Timeout() 方法实现，模拟动画形式返回顶部，也是体验感最好的一种，但缺点就会损耗一些性能。   第二种是瞬间返回顶部的，绑定事件，设置滚动条的位置像素, 单击一下马上到...
原生JS实现动态返回顶部
骆小胖~
12-05 2200
户体验效果来说，并不是最好的。（锚链接回到顶部时太快了，而且用户可能在看到某个感兴趣的东西想停下来，却停不下来）   【主体】       针对上面的缺点，我们试着用Javascript的方法来得到实现。思路是这个样子的： 1、首先用html和css构建基本的例子，代码如下 html部分： &lt;div class="box"&gt; &lt;img src="1.jpg"/&gt
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 713
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
用HTML+CSS实现“回到顶部”按钮的基础功能
qq_42903642的博客
07-06 3581
整体思路： 在页面中定位一个按钮，给该按钮添加一个a标签，点击则回到顶部。 大概流程： 创建按钮 设置按钮的基础样式 设置按钮在页面中的位置 设置鼠标经过和点击该按钮时的样式变化 给该按钮添加“回到顶部”的动作 具体实现： 回到顶部 </div> 新的改变 我们对Markdown编辑器进行了一些功能拓展...
JavaScript实现回到顶部效果
前端开发,HTML5,css3,JavaScript,node.js,vue
11-01 650
可以通过element.scrollTop的方法实现回到顶部的效果,如下:
用javascript实现回到顶部效果
有只猫七的博客
10-01 1464
主要知识点： DOM操作：1，document.getElementById()  根据id获取标签元素                       2，document.documentElement.scrollTop  滚动条的数值，可读写 事件运用：1，window.onload()     页面加载完毕后触发                      2，onclick()
javascript 设置返回顶部的效果
O_osange的博客
01-11 1091
javaScript 设置返回顶部的效果
JavaScript：回到顶部效果
手写我对你的温柔
08-20 248
回到顶部，可以通过设置锚点，或者使用JavaScript实现： // 页面加载完毕后触发 window.onload=function(){ var obtn = document.getElementById("btn"); var timer = null;//定时器 var isTop = true;//判断中途想要停下来 var clientHeight...
用Javascript实现回到顶部效果
p763833631的博客
01-10 136
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果，今天也研究一下回到顶部有哪些方法。众所周知，用锚链接是实现回到最简单的方法，但是从用户体验效果来说，并不是最好的。（锚链接回到顶部时太快了，而且用户可能在看到某个感兴趣的东西想停下来，却停不下来），针对上面的缺点，我们试着用Javascript的方法来得到实现。思路是这个样子的： 1、首先用html和css构建基本的例子，...
javascript实现回到顶部特效
10-24
以上就是使用JavaScript实现“返回顶部”特效的主要步骤。这个功能不仅提高了用户体验，而且展示了JavaScript在网页交互中的强大能力。通过理解并实践这些知识点，开发者可以创建更多富有交互性的网页元素，提升网站...
基于Javascript实现返回顶部按钮
10-22
标题中的“基于Javascript实现返回顶部按钮”是指使用JavaScript编程语言来创建一个功能，当用户浏览网页至页面底部时，提供一个便捷的按钮让用户快速回到页面的顶部。这种功能对于长内容页面尤其有用，因为它提高了...
JavaScript简单实现网页回到顶部功能
10-26
JavaScript 实现网页回到顶部的功能是...通过理解这些基本原理，你可以根据需求调整参数，创造出更符合用户体验的返回顶部效果。在实际项目中，还可以结合CSS3的`transition`或`animation`属性，实现更流畅的动画效果。
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 382
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 410
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
使用nvm管理nodejs版本，设置淘宝NPM镜像源
最新发布
d312697510的博客
06-19 185
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 276
【element 】修改下拉菜单
vue格网图
南北粉面馆
06-16 344
【代码】vue格网图。
js实现动画效果回到页面顶部
07-22
你可以使用JavaScript来实现回到页面顶部的动画效果。以下是一个简单的示例代码： ```javascript // 获取回到顶部按钮 var scrollToTopBtn = document.getElementById("scrollToTopBtn"); // 监听页面滚动事件 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值