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操作内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
jquery配合css简单实现返回顶部效果
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"
-
jquery结合css实现返回顶部功能
css操作 CSS $("").css(name|pro|[,val|fn]) 位置 $("").offset([coordinates]) $("").position() $("").scrollTop([val]) $("").scrollLeft([val]) 尺寸 $("").height([val|fn]) $("").width([val|fn]) $(
-
requireJS模块化实现返回顶部功能的方法详解
本文实例讲述了requireJS模块化实现返回顶部功能的方法.分享给大家供大家参考,具体如下: 引用requireJs <script src="require.js" data-main="main"></script> html部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"&g
-
jQuery实现小火箭返回顶部特效
jquery实现小火箭返回顶部案例,供大家参考,具体内容如下 1. 滚动页面,当页面距离顶部超出1000px,显示小火箭. 封装在scroll函数里,当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐藏用fadeIn和fadeOut //当页面超出1000px的时候,让小火箭显示,如果小于1000px,则隐藏 $(window).scroll(function () { if ($(window).scrollTop() >= 1000) { $("
-
js+JQuery返回顶部功能如何实现
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以
-
jQuery实现返回顶部功能适合不支持js的浏览器
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top" rel="external nofollow" ><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top&qu
-
jquery 实现返回顶部功能
今天搞了一个回到顶部的JS JQ功能,废话不多说,有图有真相! 复制代码 代码如下: (function($){ $.fn.survey=function(options){ var defaults={width:"298",height:"207"}; var options=$.extend(defaults,options); if($.browser.msie){ var ieVersion=parseInt($.bro
-
jQuery实现返回顶部功能
代码很简单,这里就不多废话了,小伙伴们看代码吧. HTML: <!--Go to Top--> <div id="Fixed"> <a id="goTop" class="fl" title="去顶部" href="javascript:;">去顶部</a> </div> <!--Go to Top end--> CSS: .fl{ d
-
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
首先给这些'返回页首'的链接加上个Class: <a href="#" class="backtotop" target="_self">返回页首↑</a> <!--把所有返回页首的链接加上class,例如:backtotop-->然后加入下面jQuery代码,你可以把这行代码放在</body>前,或者其它位置.当然你还要在<head>里包含jQuery库文件.( 复制代码 代码如下:
-
仿新浪微博返回顶部的jquery实现代码
一.引言 在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具条上:新浪微博的返回顶部在滚动高度大于0的时候显示,且返回顶部的效果是平滑动画效果.本文的实现就是类似于新浪微博的这种效果. 二.jQuery下的返回顶部功能 您可以狠狠地点击这里:jQuery下的返回顶部demo 可以看到,如果页面有滚动高度,右下角就会有一个含有"返回顶部"字样的黑色背景半透
-
Jquery和CSS实现选择框重置按钮功能
很多时候我们都会用到一个下拉选择,还有就是重置的功能,今天我们就给大家带来用Jquery配合CSS实现的这个功能. 代码如下: HTML <select> <option value="">Select a color..</option> <option value="red">Red</option> <option value="green">Green</opt