jquery经典实例之回到顶部

野性酷女 2021-07-25 02:36 432阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="GBK">
        <title>回到顶部</title>
        <style>
            .divA {
                height: 1500px;
            }
            .divB {
                width: 50px;
                height: 60px;
                font-size: 23px;
                background-color: green;
                position: fixed;
                right: 18px;
                bottom: 18px;
            }
            .divB:hover{
                cursor: pointer;
            }
            .hide {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="divA"></div>
        <div class="divB hide" onclick="gotoTop()"><strong>回到顶部</strong></div>
    
        <script src="jquery-1.5.1.js"></script>
        <script>
            window.onscroll = function () {
                var current = $(window).scrollTop();
                //纵向滚动条遮盖高度超过180就显示回到顶部div
                if (current > 180){
                    $(".divB").removeClass("hide");
                }else {
                    $(".divB").addClass("hide");
                }
            };
    
            function gotoTop() {
                $(window).scrollTop(0);
            }
        </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，432人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery-回到顶部练习

描述：点击回到顶部，滚动条慢慢滚动到底部代码如下： <!DOCTYPE html> <html> <head> <meta cha

冷不防/ 2022年12月02日 10:46/ 0 赞/ 173 阅读

相关 jquery实现回到顶部效果

css: <style> div { width: 100%; height:

朱雀/ 2022年09月14日 09:09/ 0 赞/ 196 阅读

相关 11、jQuery插件之回到顶部插件

demo1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

刺骨的言语ヽ痛彻心扉/ 2022年06月15日 07:20/ 0 赞/ 230 阅读

相关回到顶部

[html元素固定定位fixed][html_fixed] 元素固定定位，比如：固定在右上角或者是在左下角，主流浏览器下，使用fixed就能实现，但是IE6不支持fixe

╰半夏微凉°/ 2022年06月02日 04:56/ 0 赞/ 302 阅读

相关 JS原生之回到顶部。

> 欢迎评论，指出不足，表达建议~ <!-- a 标签的a:hover兼容所有浏览器。默认跳转页面，没有值得话，刷新本页面。写target：锚点

向右看齐/ 2022年05月14日 03:25/ 0 赞/ 211 阅读

相关回到顶部

<template> <div class=""> <div class="flexd"> <d

港控/mmm°/ 2021年12月19日 16:51/ 0 赞/ 403 阅读

相关回到顶部效果

锚链接优点：简单快速、没有兼容性问题缺点：视觉上不够直观，用户体验不够好用JavaScript制作回到顶部效果当滚动条滚动一定

Bertha 。/ 2021年10月19日 11:36/ 0 赞/ 436 阅读

相关回到顶部组件

回到顶部--组件 1.html 一个button足矣 <button class="back-to-top">返回顶部</button> 2.css 注

Myth丶恋晨/ 2021年10月09日 03:52/ 0 赞/ 425 阅读

相关 jquery经典实例之回到顶部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK">

野性酷女/ 2021年07月25日 02:36/ 0 赞/ 433 阅读

相关 jquery经典实例之放大镜

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Ty

逃离我推掉我的手/ 2021年07月24日 19:27/ 0 赞/ 463 阅读