jquery结合css实现返回顶部功能
作者：各有各的范儿
在本篇文章里小编给大家整理了一篇关于jquery结合css实现返回顶部功能的相关文章，有兴趣的朋友们可以实例测试下。
css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
实例返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-2.2.3.js"></script>
<script>
window.onscroll=function(){
var current=$(window).scrollTop();
console.log(current)
if (current>100){
$(".returnTop").removeClass("hide")
}
else {
$(".returnTop").addClass("hide")
}
}
function returnTop(){
// $(".div1").scrollTop(0);
$(window).scrollTop(0)
}
</script>
<style>
body{
margin: 0px;
}
.returnTop{
height: 60px;
width: 100px;
background-color: darkgray;
position: fixed;
right: 0;
bottom: 0;
color: greenyellow;
line-height: 60px;
text-align: center;
}
.div1{
background-color: orchid;
font-size: 5px;
overflow: auto;
width: 500px;
}
.div2{
background-color: darkcyan;
}
.div3{
background-color: aqua;
}
.div{
height: 300px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1 div">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>
<div class="div2 div"></div>
<div class="div3 div"></div>
<div class="returnTop hide" onclick="returnTop();">返回顶部</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
height: 100px;
width: 100px;
background-color: red;
}
.div3{
height: 120px;
width: 120px;
background-color: seagreen;
}
.div2{
position: relative;
}
.div4{
background-color: aquamarine;
width: 150px;
height: 150px;
padding: 5px;
margin: 6px;
border: 4px solid green;
}
.div5{
width: 50%;
height: 200px;
overflow: auto;
}
.div6{
width: 100%;
height: 1000px;
}
.div5{
background-color: aquamarine;
}
.div6{
background-color: chocolate;
}
.div7{
width: 90px;
height: 60px;
position: fixed;
right: 20px;
bottom: 20px;
background-color: yellow;
text-align: center;
/*文本横向居中*/
line-height: 60px;
/*文本行高*/
}
.hide{
display: none;
}
</style>
</head>
<body>
<!-- <div class="div1"></div>-->
<!-- <div class="div2">-->
<!-- <div class="div3"></div>-->
<!-- </div>-->
<!-- <div class="div4"></div>-->
<!-- <script src="jquery-3.3.1.js"></script>-->
<!-- <script>-->
<!-- // 计算离视口偏移量-->
<!-- console.log($('.div1').offset().left); // 0-->
<!-- console.log($('.div1').offset().top); // 0-->
<!-- console.log($('.div3').offset().left); // 0-->
<!-- console.log($('.div3').offset().top); // 100-->
<!-- // 计算离已定位的父标签的偏移量(注意是已定位)-->
<!-- console.log($('.div3').position().left); // 0-->
<!-- console.log($('.div3').position().top); // 0-->
<!-- // 计算标签尺寸-->
<!-- console.log($('.div4').height()); // 150(width: 150px)-->
<!-- // console.log($('.div4').height('200px')) // 高度变成200px-->
<!-- console.log($('.div4').innerHeight()); // 160(width: 150px+padding: 5px+padding: 5px)-->
<!-- console.log($('.div4').outerHeight()); // 168(width: 150px+padding: 5px+padding: 5px+border: 4px+border: 4px)-->
<!-- console.log($('.div4').outerHeight(true)); // 180(width: 150px+padding: 5px+padding: 5px+border: 4px+border: 4px+margin: 6px+margin: 6px)-->
<!-- </script>-->
<!--滚动条监听并返回顶部实例-->
<div class="div5">
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
</div>
<div class="div6">
<button onclick="returnTop1()">return</button>
</div>
<div class="div7 hide" onclick="returnTop()">返回顶部</div>
<script src="jquery-3.3.1.js"></script>
<script>
window.onscroll=function () {
// onscroll 事件在元素滚动条在滚动时触发(window对象事件)
let num=$(window).scrollTop(); // 左右滚动条是scrollLeft
// scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置(jquery)
console.log(num);
if (num>100) {
$('.div7').removeClass('hide');
}else{
$('.div7').addClass('hide');
};
};
function returnTop() {
$(window).scrollTop(0);
};
function returnTop1() {
$('.div5').scrollTop(0);
};
</script>
</body>
</html>
实例扩展：
CSS：
.backToTop {
display: none;
width: 18px;
line-height: 1.2;
padding: 5px 0;
background-color: #000;
color: #fff;
font-size: 12px;
text-align: center;
position: fixed;
_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: Alpha(opacity=60);
}
jQuery代码
(function() {
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - 166);
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); }); })();：
到此这篇关于jquery结合css实现返回顶部功能的文章就介绍到这了,更多相关jquery的css操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！