jQuery-----获取浏览器上卷高度(scrollTop()、scrollLeft() )

本文主要是介绍jQuery-----获取浏览器上卷高度(scrollTop()、scrollLeft() ),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

<script>// 获取浏览器上卷高度// scrollTop()    上卷的高度// scrollLeft()   平移的宽度// 不同考虑浏览器的兼容性,jQuery会来处理// 可以回去,也可以设定// jquery中,滚动条的监听事件$(window).scroll(function(){// 判断 浏览器的上卷高度 if($(window).scrollTop() > 500){// 大于 500 , 让 div,下拉显示$('div').slideDown();$('p').slideDown();}else{// 小于等于 500 , 当div,上卷隐藏$('div').slideUp();$('p').slideUp();}})// 点击返回顶部// 获取和设定时, 可以通过 $(window) 来进行操作//              也可以通过 $('html') 来进行操作// 设定自定义动画时, 必须只能使用 $('html') 来进行//                  $(window) , 不支持 动画效果的// $('p').click(function(){// 如果是设定,可以是 $(window) 或者 $('html')// 不过 这个是 瞬间完成 的// $(window).scrollTop(0);// 通过自定义动画,使用动画效果完成// 只能是 $('html') 来执行$('html').animate( { scrollTop: 0 } , 2000 );})总结页面上卷操作1, 获取 和 设定scrollTop()   scrollLeft()没有参数是获取,有参数是设定获取和设定的对象,可以是 $(window)  或者  $('html')window 是一个 JavaScript 的 顶级对象要使用 jquery 的语法 必须要 加 $() 来转化$('html') 通过 html 标签名称 来获取标签对象 --- 选择器语法2,  自定义动画效果$('html').animate( {scrollTop:数值} , 时间 );只有 $('html') 支持动画效果</script>

这篇关于jQuery-----获取浏览器上卷高度(scrollTop()、scrollLeft() )的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/351073

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

C++常见容器获取头元素的方法大全

《C++常见容器获取头元素的方法大全》在C++编程中,容器是存储和管理数据集合的重要工具,不同的容器提供了不同的接口来访问和操作其中的元素,获取容器的头元素(即第一个元素)是常见的操作之一,本文将详细... 目录一、std::vector二、std::list三、std::deque四、std::forwa

使用Python高效获取网络数据的操作指南

《使用Python高效获取网络数据的操作指南》网络爬虫是一种自动化程序,用于访问和提取网站上的数据,Python是进行网络爬虫开发的理想语言,拥有丰富的库和工具,使得编写和维护爬虫变得简单高效,本文将... 目录网络爬虫的基本概念常用库介绍安装库Requests和BeautifulSoup爬虫开发发送请求解