jQuery 返回顶部效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
var toppos = 0;
$(".back_top_index").hide();
$(document).scroll(
  function(){
    toppos=$(document).scrollTop();
    var oClient =$(window).height();//当前窗口可视区域高度
    if(toppos>oClient){
      $(".back_top_index").fadeIn();
    }else if(toppos==0){
      $(".back_top_index").fadeOut();
    }
  }
)
$(".back_top_index").click(function(){
    $("html,body").animate({scrollTop:0})
  })

})
</script>
<div style="height:2000px;">3423424</div>
<div class="back_top_index">1</div>
<style>
.back_top_index{width: 50px;height: 50px;position: fixed;bottom: 10px;right: 10px;background-color: red;}
</style>
</body>
</html>
时间: 2024-10-10 23:51:47

jQuery 返回顶部效果的相关文章

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

简单几步实现返回顶部效果

今天与大家分享下网页中经常出现的返回顶部效果 相比原生Javascript,jquery实现起来能够省略不少代码. 接下来就直接贴代码啦: 1 $(function(){ 2 $(window).scroll(function(){ //scroll--浏览器滚动条滚动式触发 3 var wHeight=$(window).height(); //获取浏览器可视窗口高度 4 var wTop=$(window).scrollTop(); //获取滚动条距离顶部高度 5 if(wTop>=wHei

jquery返回顶部-ie6配合css表达式。

css: .wraper{ width:980px; height:2048px; margin:0 auto; background:#ccc; } /*返回头部*/ #backToTop a{ display:block; cursor:pointer;width:25px; height:26px; text-indent:-9999em; position:absolute; left:0; top:0; z-index:10;} #backToTop .bt_bg{ backgroun

jQuery返回顶部(精简版)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery返回顶部</title> <style> *body{ background-attachment: fixed; background-image: url(about:blank); /* 必须的,防抖动 */} *body #t

jquery实现返回顶部效果

jQuery("#gotop").css('display','none');jQuery(window).scroll(function(){if(jQuery(this).scrollTop()>100){jQuery("#gotop").fadeIn(1000)}else{jQuery("#gotop").fadeOut(750)}});jQuery("#gotop").click(function(){jQuer

jquery返回顶部,支持手机

效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象. 这是因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况 为此,移动端判断次数好些,下面是具体实现代码,兼容pc: <!DOCTYPE html> <html> <head> <meta http-

js返回顶部效果

当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮,点击它可以使页面返回顶部,用户再也不用滚动滚轮了.下面我总结了集中常用的返回顶部的效果: 方法一(最简单,代码量最少,但是效果有些生硬).代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <

博客园安装jQuery返回顶部代码教程

博客园支持上传js文件,这给博主提供了很大的拓展空间,例如返回顶部的jQuery代码. 首先先上传返回顶部图片到博客园 topback.gif: 然后在scrolltopcontrol.js中找到topback.gif的地址,将其替换成上传至博客园中的文件地址(右键topback.gif → 复制链接地址) scrolltopcontrol.js 代码: var scrolltotop={ setting:{ startline:100, //起始行 scrollto:0, //滚动到指定位置

HTML页面实现返回顶部效果 go to top

1.首先导入jQuery插件. 2.js代码: $(window).scroll(function () { if($(window).scrollTop()>=100) { $(".backtop").fadeIn(); }else { $(".backtop").fadeOut(); } }); $(".backtop").click(function(event){ $('html,body').animate({scrollTop: