怎么用jquery结合css实现返回顶部功能
本文主要介绍"如何用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">
<h2>hello</h2>
<h2>hello</h2>
<h2>hello</h2>
<h2>hello</h2>
<h2>hello</h2>
<h2>hello</h2>
<h2>hello</h2>
<h2>hello</h2>
<h2>hello</h2>
<h2>hello</h2>
</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实现返回顶部功能" 就介绍到这。希望大家多多支持编程宝库。
本文主要介绍"innerhtml和innertext的区别是什么"，希望能够解决您遇到有关问题，下面我们一起来看这篇 "innerhtml和innertext的区别是什么" 文章。首先我们 ...