jQuery——滚动条位置的获取与设置

1、scroll() 方法

$(selector).scroll()

当用户滚动指定的元素时,会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。

将函数绑定到 scroll 事件

语法

$(selector).scroll(function)
function可选。规定当发生 scroll 事件时运行的函数。

2、滚动条位置的获取与设置

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条位置的获取与设置</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            overflow: scroll;
        }
        p{
            text-indent: 2em;
            width: 1000px;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            //获取滚动条的位置
           $("button:eq(0)").click(function () {
               console.log($("div").scrollTop());
               console.log($("div").scrollLeft());
           });
           //设置滚动条的位置
            var i = 0;
            $("button:eq(1)").click(function () {
                i += 100;
                $("div").scrollTop(i);
                $("div").scrollLeft(i);
            });
        });
    </script>
</head>
<body>
    <button>获取滚动条的位置</button>
    <button>设置滚动条的位置</button>
    <div>
        <h1>鲁迅简介</h1>
        <p>鲁迅〔1881年9月25日~1936年10月19日〕,中国文学家、思想家和革命家。原名周树人,字豫才,浙江绍兴人。出身于破落封建家庭。青年时代受进化论、尼采超人哲学和托尔斯泰博爱思想的影响。1902年去日本留学,原在仙台医学院学医, 后从事文艺工作,企图用以改变国民精神。
            1905-1907年,参加革命党人的活动, 发表了《摩罗诗力说》、《文化偏至论》等论文。期间曾回国奉母命结婚,夫人朱安。 1909年,与其弟周作人一起合译《域外小说集》,介绍外国文学。同年回国, 先后在杭州、绍兴任教。辛亥革命后,曾任南京临时政府和北京政府教育部部员、
            佥事等职,兼在北京大学、女子师范大学等校授课。1918年5月,首次用"鲁迅"的笔名,发表中国现代文学史上第一篇白话小说《狂人日记》,奠定了新文学运动的 基石。五四运动前后,参加《新青年》杂志工作,成为"五四"新文化运动的主将。 1918年到1926年间,陆续创作出版了
            小说集《呐喊》、《彷徨》、论文集《坟》、 散文诗集《野草》、散文集《朝花夕拾》、杂文集《热风》、《华盖集》、《华盖集续编》等专集。其中,1921年12月发表的中篇小说《阿Q正传》,是中国现代文学 史上的不朽杰作。1926年8月,因支持北京学生爱国运动,为北洋军阀政
            府所通缉, 南下到厦门大学任中文系主任。1927年1月,到当时的革命中心广州,在中山大学任教务主任。1927年10月到达上海,开始与其学生许广平同居。1929年,儿子周海婴 出世。1930年起,先后参加中国自由运动大同盟、中国左翼作家联盟和中国民权保障同盟,反抗国民党政
            府的独裁统治和政治迫害。从1927年到1936年,创作了历史 小说集《故事新编》中的大部分作品和大量的杂文,收辑在《而已集》、《三闲集》、 《二心集》、《南腔北调集》、《伪自由书》、《准风月谈》、《花边文学》、 《且介亭杂文》、《且介亭杂文二编》、《且介亭杂文末编》、
            《集外集》和《集外集拾遗》等专集中。鲁迅的一生,对中国文化事业作出了巨大的贡献:他领导并支持了"未名社"、"朝花社"等文学团体;主编了《国民新报副刊》〔乙种〕、 《莽原》、《语丝》、《奔流》、《萌芽》、《译文》等文艺期刊;热忱关怀、积极培养青年作者;大力翻译外国
            进步文学作品和介绍国内外著名的绘画、木刻;搜 集、研究、整理了大量的古典文学,编著《中国小说史略》、《汉文学史纲要》,整 理《嵇康集》,辑录《会稽郡故书杂录》、《古小说钩沈》、《唐宋传奇录》、 《小说旧闻钞》等等。1936年10月19日因肺结核病逝于上海,上海民众
            上万名自发 举行公祭、送葬,葬于虹桥万国公墓。1956年,鲁迅遗体移葬虹口公园,毛泽东为重建的鲁迅墓题字。1938年出版《鲁迅全集》〔二十卷〕。中华人民共和国成立后, 鲁迅著译已分别编为《鲁迅全集》〔十卷〕,《鲁迅译文集》〔十卷〕,《鲁迅日记》〔二卷〕,《鲁迅书信集》,
            并重印鲁迅编校的古籍多种。1981年出版了《鲁迅全集》〔十六卷〕。北京、上海、绍兴、广州、厦门等地先后建立了鲁迅博物馆、 纪念馆等。鲁迅的小说、散文、诗歌、杂文共数十篇〔首〕被选入中、小学语文课 本。小说《祝福》、《阿Q正传》、《药》等先后被改编成电影。</p>
        <h1>文艺影响</h1>
        <p>鲁迅是20世纪的文化巨人,他在小说、散文、杂文、木刻、现代诗、旧体诗、名著翻译、古籍校勘和现代学术等多个领域都有巨大贡献。作为中国现代文学的伟大奠基者,鲁迅创作的为数不多的小说建立了中国小说的新形式;他所创作散文更是“显示了文学革命的实绩”;他的所开创的杂文文体富有现代性、
        自由性、批判性和战斗性,是后世作家最常使用的“批判武器”,他所创作的杂文更是中国社会、政治、历史、法律、宗教、道德、哲学、文学、艺术乃至文化心理、民性、民情、民俗……的百科全书。几乎所有的中国作家都在鲁迅开创的基础上,发展了不同的方面的文学风格体式。作为翻译家他大量的翻译了
        外国的文学作品、科学自然作品为开启民智,引入先进的科学文化思想做出了巨大的贡献。而作为美术爱好者鲁迅大量引进了西方木刻、版画作品,并在精神、理论和精神等多方面支持青年人学习木刻、版画艺术,极大的推进了现代木刻、版画在现代中国的传播与发展,为现代中国的美术事业做出卓越的贡献。</p>
        <h1>学术影响</h1>
        <p>作为一名学术研究者,一方面,鲁迅运用西方的文学观念研究中国古典小说撰写了《中国小说史略》,其不仅结束了“中国之小说自来无史”的时代,也创造了文学史著作的典型范例,“为后学开示无数法门”,郭沫若将其与王国维的《宋元戏曲史》并称为为中国近代学术史上的双璧。另一方面他整理校对勘正了
        《古小说钩沉》《嵇康集》《汉画像集》《会稽郡故书杂集》等数十部古籍,为后世的古典文学研究留下了一笔巨大财富。</p>
        <h1>精神影响</h1>
        <p>鲁迅堪称现代中国的民族魂,他的精神深刻影响着他的读者、研究者,以至一代又一代的中国现代作家、现代知识分子。鲁迅同时又是20世纪世界文化巨人之一。他创造了“内外两面,都和世界的时代思潮合流,而又并未梏亡中国的民族性”,并具有独特的个人风格的“现今想要参与世界上的事业的中国人”的文学。
        他与同时期的世界杰出的思想家和文学家一样,在关注本民族的同时,也在关注着人类共同面临的问题,并做出了自己的独特贡献。</p>
        <h1>政治影响</h1>
        <p>鲁迅一生追求民主,早在新文学运动伊始时期便向封建旧文化宣战,不断与压迫民众的旧思想旧文化斗争。“女师大学潮”发生后与迫害学生的军阀进行论争,鲁迅不畏强暴执笔对战,显示出一个正直文人的气概。尔后国民党统治之下又大胆披露其黑暗统治。三十年代又与共产党内左倾的错误文艺路线进行斗争,
            其后与党领导下的文艺工作者合作成立了无产阶级文艺思想领导的左翼作家联盟,鲁迅作为左联的盟主,领导左联粉碎了国民党反动文艺妄图绞杀无产阶级文艺的阴谋。</p>
    </div>
</body>
</html>

应用:

1、jQuery——固定导航栏:点击打开链接

2、jQuery——浏览器窗口两侧跟随的广告案例:点击打开链接

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值