【JavaScriptjQuery】返回顶部

<!doctype html>
<html>  <head>  <meta charset="utf-8">  <title>返回顶部</title>  <meta name="Keywords" content="关键词,关键词">  <meta name="Description" content="">  <!--css,js-->  <style type="text/css">  *{margin:0;padding:0;}  p{width:300px; height:200px;background:#ccc; margin:10px auto;}  .top{width:60px;height:50px;position:fixed;right:22px;bottom:100px;display:none;}  .top span{width:60px;height:50px;background:url("img/icon_top.png")no-repeat center #000;display:block;box-shadow:2px 4px 10px #ccc;border-radius:4px;cursor:pointer;}  </style>  <script type="text/javascript" src="js/jquery.js" ></script>  </head>  <body>  <p>1</p>  <p>2</p>  <p>3</p>  <p>4</p>  <p>5</p>  <p>6</p>  <p>7</p>  <div class = "top">  <span></span>  </div>  <script type = "text/javascript">  //返回顶部的小图标的现隐
            $(window).scroll(function(){  if($(window).scrollTop() >= 100){  $(".top").fadeIn(600);  }else{  $(".top").stop(true,true).fadeOut(600);  }  });  //返回顶部  $(".top").click(function(){  $("html,body").animate({  scrollTop:0  },800);  });  </script>  </body>
</html>

转载于:https://www.cnblogs.com/dflmg/p/6385353.html

【JavaScriptjQuery】返回顶部相关推荐

包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...
返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 如果你看到这段文字,说明转自<一棵树-博客园>,原文链接:http://www.cnb ...
jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
在octopress中增加“返回顶部”按钮
为什么80%的码农都做不了架构师?>>> <div id="main"><article class="hentry" ...
js返回顶部和始终保持底部
用到了三个部分: document.documentElement.scrollHeight //表示页面总高度,包含未显示的 document.documentElement.clientHeigh ...
前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
教你网站怎么添加返回顶部代码?
网站添加返回顶部有好几种,下面我简单介绍下: 1 使用文字添加方法最简单的是:最简单的"返回顶部"代码就是"<a href="javascript:scr ...
jquery返回顶部
Jquery返回顶部插件使用简单,步骤如下: 1.引用插件js和css文件 2.设置默认参数(showHeight :设置滚动高度时显示.speed :返回顶部的速度以毫秒为单位) $(functio ...

【JavaScriptjQuery】返回顶部

【JavaScriptjQuery】返回顶部相关推荐

最新文章

热门文章