javascript回到顶部特效

最新推荐文章于 2024-10-05 01:22:45 发布

程宇寒

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量161

点赞数

文章标签： javascript js 特效回到顶部事件

本文链接：https://blog.csdn.net/czh500/article/details/101395578

版权

<script type="text/javascript">
		var timer = null;
		//回到顶部
		backTop.onclick = function() {
			cancelAnimationFrame(timer);
			timer = requestAnimationFrame(function fn() {
				var oTop = document.body.scrollTop
						|| document.documentElement.scrollTop;
				if (oTop > 0) {
					document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
					timer = requestAnimationFrame(fn);
				} else {
					cancelAnimationFrame(timer);
				}
			});
		}
	</script>

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	//解决include动作传递参数时中文乱码
	request.setCharacterEncoding("utf-8");
	String message = "我老家是江西赣州于都县";
	int number = 266;
	request.setAttribute("name", "jK罗琳");
	//设置一个servlet的url路径
	request.setAttribute("servletURL", "testInclude");
	System.out.println("++++" + request.getAttribute("servletURL"));
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jsp中include动作演示</title>
<link rel="stylesheet" type="text/css" href="body.css">
<link rel="stylesheet" type="text/css" href="mark.css">
<link rel="stylesheet" type="text/css" href="input2.css">
</head>
<body>
<h1>这是testIncludeAction.jsp页面(include动作演示)</h1><br>
<jsp:include page="include.jsp">
<jsp:param value="中国江西省赣州市于都县" name="hometown"/>
<jsp:param value="<%=request.getAttribute(\"name\") %>" name="userName"/>
<jsp:param value="<%=message %>" name="message"/>
<jsp:param value="<%=number %>" name="number"/>
<jsp:param value="reading" name="hobby"/>
</jsp:include>
<!-- include动作，被包含的文件可以是个Servlet， page属性支持表达式，如下的案例 -->
<jsp:include page="<%="testInclude" %>"></jsp:include> 

<!-- 可以直接写servlet的url，程序运行没问题，就是源码文件会有个红色小叉叉 -->
<!--<jsp:include page="testInclude"></jsp:include> -->
参考网页https://www.cnblogs.com/wgbs25673578/p/4986388.html
<!-- jsp:include动作的page属性支持EL表达式，也支持jsp表达式，也支持Servlet，也支持用?问号的方式传递参数 -->
<!-- 如下写法也可以，这样可以避免源码文件出现红色小叉叉 -->
<jsp:include page="${requestScope.servletURL}?testName=jerry">
<jsp:param value="12" name="age"/>
</jsp:include>
<h1>这是testIncludeAction.jsp页面(include动作演示)</h1><br>
<input id="backTop" type="button" value="火箭飞回顶部">
	<script type="text/javascript">
		var timer = null;
		//回到顶部
		backTop.onclick = function() {
			cancelAnimationFrame(timer);
			timer = requestAnimationFrame(function fn() {
				var oTop = document.body.scrollTop
						|| document.documentElement.scrollTop;
				if (oTop > 0) {
					document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
					timer = requestAnimationFrame(fn);
				} else {
					cancelAnimationFrame(timer);
				}
			});
		}
	</script>
</body>
</html>