整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
现按钮点击快速回到页面顶部，有多种方法。
在这里我介绍一下jQuery的方法。
jQuery核心代码：
$(".top").click(function() {
$("body,html").animate({
scrollTop: 0
}
<script type="text/javascript">
var userAgent=navigator.userAgent.toLowerCase();
var browser=
(browser=userAgent.match(/qqbrowser\/([\d.]+)/))?"qqbrowser/"+browser[1]:
(browser=userAgent.match(/se\s+2.x/))?"sogou/2.x": //sougou
(browser=userAgent.match(/msie\s+([\d.]+)/))?"msie/"+browser[1]: //ie
(browser=userAgent.match(/chrome\/([\d.]+)/))?"chrome/"+browser[1]: //chrome
(browser=userAgent.match(/firefox\/([\d.]+)/))?"firefox/"+browser[1]: //firefox
(browser=userAgent.match(/version\/([\d.]+)\s+safari\/([\d.]+)/))?"safari/"+browser[1]: //safari
(browser=userAgent.match(/opera\/([\d.]+)([\w\W]+)version\/([\d.]+)/))?"opera/"+browser[3]: //opera
"other browser";
var browser4=browser.substr(0,2);
//实现回到页面顶部
function goTopEx(){
var obj=document.getElementById("goTopBtn");
var obj2=document.getElementById("shangy");
var obj3=document.getElementById("xiay");
var obj4=document.getElementById("goBottom");
function getScrollTop(){
if(browser4=="ch"){
//谷歌浏览器
return document.body.scrollTop;
}else{
//IE、firefox等浏览器
return document.documentElement.scrollTop;
}
}
function setScrollTop(value){
if(browser4=="ch"){
//谷歌浏览器
document.body.scrollTop=value;
}else{
//IE、firefox等浏览器
document.documentElement.scrollTop=value;
}
}
window.onscroll=function(){getScrollTop()>50?obj.style.display="":obj.style.display="none";
getScrollTop()>100?obj2.style.display="":obj2.style.display="none";
document.body.clientHeight-getScrollTop()>650?obj3.style.display="":obj3.style.display="none";
document.body.clientHeight-getScrollTop()>650?obj4.style.display="":obj4.style.display="none";
}
obj.onclick=function(){
var goTop=setInterval(scrollMove,10);
function scrollMove(){
setScrollTop(getScrollTop()/1.1);
if(getScrollTop()<1)clearInterval(goTop);
}
}
}
function downn(){
if(browser4=="ch"){
//谷歌浏览器
window.scrollBy(0,document.body.clientHeight);
}else{
//IE、firefox等浏览器
window.scrollBy(0,document.documentElement.clientHeight);
}
}
</script>
<style type="text/css">
#tbrowser a:link，.container a:visited{
font-size:18px;
text-decoration:none;
}
.container{
font-size:1.2em;
margin:auto;
font-family:"宋体";
width:75.29%;
line-height:1.6em;
}
P{
margin-top:16px;
margin-bottom:16px;
text-indent:2em;
}
.uls{
color:#CC6666;
font-weight:bold;
}
.uls>ol{
list-style:none;
font-weight:normal;
list-style:lower-latin;
color:#000000;
line-height:1.3em;
}
h2{
font-size:20px;
font-weight:bold;
margin-top:15px;
margin-bottom:0px;
text-indent:0em;
}
#goTopBtn, #goBottom, #shangy, #xiay{
width: 18px;
line-height: 1.2;
padding: 5px 0;
font-size: 12px;
text-align: center;
position: fixed;
right: 10px;
cursor: pointer;
filter: Alpha(opacity=30);
opacity=.3;
}
#goTopBtn, #goBottom {
background-color:#aaa;
color:#000;
}
#shangy, #xiay{
background-color: #ccc;
color: #000;
}
#goTopBtn{
bottom: 105px;
}
#goBottom {
bottom: 30px;
}
#shangy {
bottom: 80px;
}
#xiay {
bottom: 55px;
}
#goTopBtn:hover, #goBottom:hover, #shangy:hover, #xiay:hover{
background-color:#ddd;
border:#ccc 0px solid;
}
#goTopBtn a:link, #goBottom a:link, #xiay a:link, #shangy a:link {
text-decoration: none;
color:white;
}
img{
margin-right:2em;
text-indent:2em;
border:0;
}
.picsay{
color:#930;
font-size:90%;
line-height:110%;
margin-top:-12px;
padding:0;
}
.remark{
color:#930;
font-size:90%;
line-height:140%;
margin-top:-12px;
text-indent:0em;
padding:0;
}
.ref{
color:#930;
font-size:95%;
line-height:150%;
margin-top:-12px;
text-indent:2em;
padding:0;
}
.code0, .code2, .code4{
font-size:90%;
line-height:110%;
margin-top:-12px;
padding:0;
}
.code0{
color:red;
text-indent:0em;
}
.code2{
color:#930;
text-indent:2em;
}
.code4{
color:blue;
text-indent:4em;
}
sub,sup{
font-size:80%;
color:red;
}
</style>
<body>
……
<div style="display:none" id="goTopBtn">
<a href="javascript：void(null)" target="_self">∧</div>
<div style="display:none" id="shangy">
<a href="javascript：void(null)" onclick="shangy()" target="_self">↑</a></div>
<div id="xiay">
<a href="javascript：void(null)" onclick="xiay()" target="_self">↓</a></div>
<div id="goBottom">
<a href="javascript：void(null)" onclick="downn()" target="_self">∨</a></div>
<SCRIPT type=text/javascript>
goTopEx();
function xiay(){
window.scrollBy(0,window.innerHeight);
}
function shangy(){
window.scrollBy(0,-window.innerHeight);
}
</script>
</body>
</body>
关键在于控制以下一些对象及属性：
inner:测量的是一个窗口的活动文档区（以称为内容区）的高和宽；
outer:测量的是整个窗口的外边界；包括任何显示在窗口中的东西：滚动条、状态栏等；
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
－End－
Query点击返回顶部的功能在网页中很常见。当网站内容过多的时候,添加一个返回顶部的功能,可以更好的增加用户体验。用jQuery写了这样一个效果。
返回顶部按钮的一些css样式，如下：
.last{
position: fixed;
width: 50px;
height: 50px;
right: 200px;
bottom: 55px;
cursor: pointer;
text-align: center;
line-height: 50px;
background-color: #00b7ee;
opacity: 0.8;
color: #fff;
}
.last:hover{
background-color: #1fb5ad;
color: #fff;
}
首先需要在html页面添加如下元素：
<!--返回顶部 start-->
<div class="last">
<span> 顶部 </span>
</div>
<!--返回顶部 end-->
jquery代码
有了html和样式，我们还需要用jquery来控制返回顶部按钮，在页面滚动时淡入淡出返回顶部按钮。
<script>
$(document).ready(function() {
//首先将.last 隐藏
$(".last").hide();
//当滚动条的位置处于距顶部150像素以下时，返回顶部按钮显示，否则隐藏
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 150) {
$(".last").fadeIn(1500);
} else {
$(".last").fadeOut(1500);
}
});
// 点击返回顶部
$('.last').on('click',function(){
$('html,body').animate({
scrollTop:0
},500);
return false;
});
});
});
</script>
*请认真填写需求信息，我们会在24小时内与您取得联系。
