Js返回顶部实例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>返回顶部</title>
<style>
#myBtn {display: none;position: fixed;bottom: 20px;right: 30px;z-index: 99;border: none;outline: none;background-color: red;color: white;cursor: pointer;padding: 15px;border-radius: 10px;
}#myBtn:hover {background-color: #555;
}
</style>
</head>
<body><button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button><div style="background-color:black;color:white;padding:30px">向下滑动</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">该实例演示了如何实现网页返回顶部效果。</div>
<script>
// 当网页向下滑动 200px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};function scrollFunction() {console.log(121);if (document.body.scrollTop > 200 || document.documen

Js返回顶部实例代码相关推荐

html一键回到顶部,HTML实现简单大方的 “返回顶部” 实例代码
简单的"返回顶部"效果 .cs{ width:50px; height:100px; background-color: #F0F0F0; border:1px solid #D9 ...
html匀速回到顶部,原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
jquery返回顶部特效代码网页滚动返回顶部特效
网页悬浮返回顶部图标可以说是一项非常常见切比较实用的功能,可以使用HTML来实现,但是返回顶部效果太过僵硬,体验不好,这里分享一个纯js返回顶部切具有过渡效果的实例. 效果如上图所示. 具体代码如下: ...
html返回底部代码,jQuery实现的个性化返回底部与返回顶部特效代码
本文实例讲述了jQuery实现的个性化返回底部与返回顶部特效代码.分享给大家供大家参考,具体如下: 运用了所学习的jQuery特性,制作了这款效果,该效果集结了返回底部.返回顶部.网站留言导航三种功能 ...
手机号判断正则php2019,2019手机号码JS正则表达式验证实例代码
概念正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串的 ...
2022手机号码JS正则表达式验证实例代码
这篇文章主要介绍了2022手机号码JS正则表达式验证实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下概念正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的 ...
cef js返回c++的代码_CEF3开发者系列之外篇——IE中JS与C++交互
使用IE内核开发客户端产品,系统和前端页面之间的交互,通常给开发和维护带来很大的便利性.但操作系统和前端之间的交互却是比较复杂的.具体来说就是脚本语言和编译语言的交互.在IE内核中html和css虽然 ...
返回顶部php代码,网页中返回顶部代码(多种方法)另附注释说明_jquery
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 f ...
js返回顶部和始终保持底部
用到了三个部分: document.documentElement.scrollHeight //表示页面总高度,包含未显示的 document.documentElement.clientHeigh ...
出租广告Java代码_Spring cloud 查询返回广告创意实例代码
根据三个维度继续过滤在上一节中我们实现了根据流量信息过滤的代码,但是我们的条件有可能是多条件一起传给我们的检索服务的,本节我们继续实现根据推广单元的三个维度条件的过滤. 在SearchImpl类中添 ...

Js返回顶部实例代码

Js返回顶部实例代码相关推荐

最新文章

热门文章