简单的返回顶部效果

<!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
" xml:lang="en">

<head>

 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

 <title>js</title>

</head>

<body>

<style type="text/css">

.back{display:none;width:48px;line-height:1.2;padding:5px 0;background-color:#000;color:#fff;font-size:12px;text-align: center;position:fixed;right:10px;bottom:100px;cursor:pointer;opacity:0.6;filter:Alpha(opacity=60);}

</style>

<script type="text/javascript" src="
http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script
>

<script type="text/javascript">

$(document).ready(function(){

$(‘<div>TOP</div>‘).appendTo($("body")) 

$(".back").click(function(){

 $("html,body").animate({scrollTop:0}, 1100);

})

$(window).scroll(function (){

 $(document).scrollTop()> 0? $(".back").fadeIn(500): $(".back").fadeOut(500); 

})

})

</script>

<p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p>

</body>

</html>
时间: 2024-10-12 12:59:10

简单的返回顶部效果的相关文章

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

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

js返回顶部效果

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

简单的返回顶部代码

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 <a href="#top" target="_self">返回顶部</a>方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) <a href="javascript:scroll(0,0)">返回顶部</a> 

css 返回顶部效果

相对 <div style="height: 300px;margin-top: 200px;border: 4px solid green;position: relative;"> <a style="position: absolute;right: 0;bottom: 0;">返回顶部</a> </div>

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:

一个简单的返回顶部jQuery代码

本文演示jQuery返回顶部,当文章页比较长时间,可以方便用户返回网站的顶部,实现代码也不难,大家学习下! jQuery返回顶部 调用代码: <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script> <script language="javascript" type="

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 返回顶部效果

<!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

原生js,实现“返回顶部”效果

html: <span>^</span> css body{                height: 3000px;            }            span{                display: block;                position: fixed;                bottom: 20px;                right: 10px;                font-size: 60px;