jquery返回页面顶部

1、此博文图片样式引用腾讯网站,效果如下:

2、样式设置:

 1 #toTop {
 2        /*选中的背景图片的大小*/
 3     width: 54px;
 4     height: 54px;
 5     display: none;/*刚开始不显示*/
 6     position: fixed;
 7     right: 25px;/*距离右边大小值*/
 8     bottom: 45px;/*距离底部大小值*/
 9        /*选定图片区域*/
10     background-image: url(images/qqbg_1.5.5.png);
11     background-repeat: no-repeat;
12     background-position: -700px -110px;
13     opacity: 0.3; /*透明度*/
14 }
15
16 #toTop:hover {
17     opacity: 1;/*悬停时不透明*/
18     filter: alpha(opacity = 100);
19 }

3、JS代码:

1 <a href="#" target="_self" id="toTop" title="返回顶部" onclick="window.scrollTo(0,0);return false"></a>
2 <script type = "text/javascript">
3     function toTopHide(){
4         $(document).scrollTop()>400?
5                 $("#toTop").show()
6                     :$("#toTop").hide();
7     }
8     $(window).scroll(function(){toTopHide()});
9 </script>
时间: 2024-10-10 16:51:07

jquery返回页面顶部的相关文章

返回页面顶部最简单方法

<a href="#">返回页面顶部</a> 原文地址:https://www.cnblogs.com/mengfangui/p/8259027.html

js网页返回页面顶部的小方法

咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop.png" class="gotop" > <div class="gotopdiv" style="display: none;"><span>返回顶部</span></div> 2.

解决点击a标签返回页面顶部的问题

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p{ 8 font-size: 400px; 9 } 10 </style> 11 </head> 12 <body> 13 <p&

jquery返回到顶部

$(document).ready(function(){ $(".btn1").click(function(){ $("div").scrollTop(100); }); }); /*返回到窗口位置100的位置*/ 返回到顶部 <a href="#top"> <span onClick="$(window).scrollTop();"></span></a> /*#top头部

解决点击空&lt;a&gt;标签返回页面顶部的问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 400px; } </style> </head> <body> <p>?</p> <a href=&quo

DIV定位右下角点击返回页面顶部

body里面第一个位置写一个a标签: <a name="top" id="top"></a> 然后再用一个div 里面放一个a标签进行跳转: <div id="fanhui">        <a href="#top" target="_self">返回顶部</a> </div> 再对这个div进行定位让其始终保持在屏幕的右下角: &

点击返回页面顶部-js

<script> window.onload=function(){ var oBtn = document.getElementById('btn'); var turn =false ; var time = null ; window.onscroll=function(){ if(turn){ clearInterval(time) } turn =true ; } oBtn.onclick=function () { time= setInterval(function(){ //

返回页面顶部样式

$("#toTop").bind("click",function(){ var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(scrollTop>200){ $("html,body").animate({scrollTop: 0},300); } });

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