基于jquery平滑滚动“返回顶部”效果

 代码如下 复制代码
<!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>
<title>点击平滑滚动“返回顶部”的效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{padding:0;margin:0;}
html{text-overflow:ellipsis;}
body{background:#eee;}
ul,li{list-style:none;}
#wrap{width:1002px;margin:0 auto;position:relative;background:#ddd;}
#scrolltop{display:none;position:fixed;bottom:10px;left:50%;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight));margin-left:501px;width:16px;border-radius:3px;font-size:14px;text-align:center;color:#080;cursor:pointer;padding:1px;background:#fff;}
#arrow{width:16px;height:12px;font-size:16px;font-weight:bold;overflow:hidden;}
#backwords{font-size:13px;padding-top:4px;}
</style>
<script type="text/javascript" src="/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function(){
 //判断滚动条距离上面的高度是否为0来判断是否显示返回头部模块
 $(window).scroll(function(){
  var top=$(window).scrollTop();
  if(top>0){
   $("#scrolltop").fadeIn("slow");
  }else{
   $("#scrolltop").fadeOut("slow");
  }
 });
 //点击返回头部效果
 $("#scrolltop").click(function(){
  $("html,body").animate({ scrollTop:0});
 });
});
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="wrap">
 <div id="scrolltop">
  <div id="arrow">▲</div>
  <div id="backwords">返回顶部</div>
 </div>
 <div style="height:2000px;">预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。</div>
</div>
</body>
</html>
时间: 2024-12-01 11:52:57

基于jquery平滑滚动“返回顶部”效果的相关文章

基于jquery 360导航返回顶部代码

top.js代码  代码如下 复制代码 var IMYUAN;   IMYUAN || (IMYUAN = {});     (function(a) {         a.fn.extend({           returntop: function() {               if (this[0]) {                   var b = this.click(function() {                       a("html, body&q

jquery小火箭返回顶部代码分享_jquery

这是一款基于jquery小火箭返回顶部特效源码,解决了页面太长造成的用户返回页面顶端困难. 为大家分享的jquery小火箭返回顶部代码如下 <head> <title>jquery小火箭返回顶部代码</title> <link href="css/top.css" rel="stylesheet" type="text/css"/> </head> <body style=&quo

ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果_jquery

要实现该效果,首先要先了解以下几点基础知识: 窗体滚动事件:$(window).scroll(function(){...}); 获取窗体滚动距离:$(window).scrollTop(); 获取窗体高度:$(window).height(); 了解以上内容就可以实现通过hyperlink控件实现返回顶部的效果了. 1.准备界面结构代码: 复制代码 代码如下: <form id="form1" runat="server"> <div> &

jQuery实现返回顶部效果五种方法

这里我介绍五种利用jQuery实现返回顶部效果 方法1.好处:回顶部按钮紧贴网页外层DIV边框:缺点:滚动时不够平滑.  代码如下 复制代码 <!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.o

jquery实现页面常用的返回顶部效果_jquery

本文实例为大家分享了jquery实现返回顶部效果的全部代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> *{ margin: 0; padding:

jQuery实现返回顶部效果的方法

  本文实例讲述了jQuery实现返回顶部效果的方法.分享给大家供大家参考.具体实现方法如下: 1.首先是CSS样式: ? 1 2 3 4 5 6 7 /*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none} #shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;positi

jQuery实现返回顶部效果的方法_jquery

本文实例讲述了jQuery实现返回顶部效果的方法.分享给大家供大家参考.具体实现方法如下: 1.首先是CSS样式: /*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none} #shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;position:relative;cursor

javascript平滑滚动到顶部,底部,指定地方

滚动到顶部:  代码如下 复制代码 $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 滚动到指定位置:  代码如下 复制代码 $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);}); 示例演示地址效果 源码参考:  代码如下 复制代码 <!

js简单的点击返回顶部效果实现方法_javascript技巧

本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum