gotop（返回顶部）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<style>
#goTopBtn {
position: fixed;
line-height:36px;
width:36px;
bottom:35px;
right:235px;
height:36px;
cursor:pointer;
display:block;
color:red;
font-size:40px;
}
</style>
<br/>
<p style="text-align:center;font-family:Georgia, ‘Times New Roman‘, Times, serif;font-size:24px;font-weight:bold;"></p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="goTopBtn">1321687461321</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<!--<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script type="text/javascript">
//返回顶部
$(document).ready(function(){
$(window).scroll(function(){
var sc=$(window).scrollTop();
var rwidth=$(window).width()
if(sc>0){
$("#goTopBtn").css("display","block");
// $("#goTopBtn").css("left",(rwidth-36)+"px")
}else{
$("#goTopBtn").css("display","none");
}
})
$("#goTopBtn").click(function(){
var sc=$(window).scrollTop();
$(‘body,html‘).animate({scrollTop:0},500);
})
})
</script>
</body>
</html>

时间： 2024-10-13 22:28:01

gotop（返回顶部）的相关文章

[转]常用返回顶部代码

转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会显示这个锚标记. <aname="top"id="top"></a> 放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可. 页面底部放置: <ahref="#top"target="

几种常用网页返回顶部代码

一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会显示这个锚标记. <aname="top"id="top"></a> 放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可. 页面底部放置: <ahref="#top"target="_self">返回顶部</a> 二.使用Javascript Scroll函数返回顶部 scrooll

a超链接之返回顶部的两种实现方法

1.通过css实现: 为页面顶部如body或者自己设置的盒子等加上唯一id属性 <body id="id"> .... <a href="#id">返回顶部</a> 2.js实现 通过设置标签滚动位置判断 document.body.scrollTop=0; <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

jQuery返回顶部的两种方法(包括go-top.js)

jQuery实现网页"返回顶部"的功能,相信见到这种效果已经不稀奇了吧;那究竟如何实现呢?方法还是挺多了,先介绍两种简单的: 第一种,只使用jquery插件来实现,下面是一个完整的代码例子,有兴趣的自己摸索吧:前端UI分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

我要返回顶部

我觉得一个网站最不可少的小功能就是返回顶部了吧,尤其是那些长的要命,拉都拉不到尽头的,简直丧心病狂,如果没有返回顶部的按钮的话,鬼愿意原路拉回去,直接关掉走人.所以一个返回顶部的按钮还是需要的,当然,返回顶部也可以做出很多花样,本文只讨论如何返回,不管具体的外观样式,那都是后话. 以下是一些方法: 1. <a href='#'>返回顶部</a> ok,搞定,是不是觉得很坑爹,但我刚开始接触的时候就是用这个方法的,简单暴力直接,就是硬生生的直接跳回去,不好看,没有美感,而且直接这样不

javascript 返回顶部

<style>#linGoTopBtn {    POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px;}</style><script>function linGoTop(){    var obj = document.getElement

js&quot;返回顶部&quot;功能实现

JS代码: <script src="../../static/js/base/jquery/jquery.min.js"></script> <script>//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失$(function () { $("#sidepanel").fadeOut(100); $(window).scroll(function(){ if ($(window).scrollTop()>

js小效果：返回顶部

返回顶部: <div id="gotop" onclick="javascript:scroll(0,0);"><img src="images/top33x33.png"></div> <style type="text/css"> #gotop{display:none;position:fixed;right:5px;bottom:4rem;width:33px;heigh

scroll滚动到一定距离触发事件/返回顶部animate

html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0;} .box{ width: 960px; height: 1800px; bac