html回到顶部代码

￡神魔★判官ぃ 2022-01-10 04:05 357阅读 0赞

HTML代码
    <p id="back-to-top"><a href="#top">返回顶部</a></p>
    CSS代码
     p#back-to-top{
                position:fixed;
                display:none;
                bottom:100px;
                right:80px;
            }
    js代码
     $(function(){
            //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
            $(function () {
                $(window).scroll(function(){
                    if ($(window).scrollTop()>100){
                        $("#back-to-top").fadeIn(1500);
                    }
                    else
                    {
                        $("#back-to-top").fadeOut(1500);
                    }
                });
    
                //当点击跳转链接后，回到页面顶部位置
                $("#back-to-top").click(function(){
                    if ($('html').scrollTop()) {
                        $('html').animate({ scrollTop: 0 }, 100);//动画效果
                        return false;
                    }
                    $('body').animate({ scrollTop: 0 }, 100);
                    return false;
                });
            });
        });

记得要引用jQuery文件

转载于:https://www.cnblogs.com/xy-milu/p/6625419.html

发表评论取消回复

表情：

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

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

相关阅读

相关 html返回顶部按钮图片,goToTop（回到顶部）按钮的制作

//GoTop mg12 GoTop = function() \{ this.config = \{ pageWidth : 960,//页面宽度 nodeId :

Love The Way You Lie/ 2022年10月06日 08:58/ 0 赞/ 220 阅读

相关 scroll-view 回到顶部

<scroll-view scroll-y :scroll-top="scrollTop" @scroll="scrollP"></scroll-view>

灰太狼/ 2022年09月02日 00:51/ 0 赞/ 252 阅读

相关 HTML学习笔记之二（回到顶部与回到底部）

回到顶部回到底部回到顶部的俩种方式一、使用js $('html, body').animate({ scrollTop: 0 }

左手的ㄟ右手/ 2022年08月05日 02:51/ 0 赞/ 484 阅读

相关回到顶部

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

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

相关快速回到顶部按钮

相信大部分做网页开发的都需要这个快速回到顶部按钮的功能吧，那么接下来我给出我觉得很简单的解决方法。直接给出demo： html页面： 1.<head></he

我不是女神ヾ/ 2022年05月27日 23:49/ 0 赞/ 466 阅读

相关回到顶部JavaScript实现

html代码 <div id="box"></div> css代码 { margin: 0;

青旅半醒/ 2022年05月27日 12:29/ 0 赞/ 277 阅读

相关 html回到顶部代码

HTML代码 <p id="back-to-top"><a href="top">返回顶部</a></p> CSS代码 pback-to-to

￡神魔★判官ぃ/ 2022年01月10日 04:05/ 0 赞/ 357 阅读

相关回到顶部

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

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

相关回到顶部效果

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

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

相关回到顶部组件

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

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