回到顶部(Top按钮)

最新推荐文章于 2024-06-19 21:43:22 发布
最新推荐文章于 2024-06-19 21:43:22 发布
阅读量481 收藏
点赞数
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .data{
            float: left;
            width: 150px;
            margin-left: 20px;
        }
        img{
            width: 150px;
            height: 150px;
        }
        .jia,.hua{
            display: inline-block;
        }

        .jia{
            color: red;
        }
        .more{
            width: 100px;
            height: 50px;
            margin: 20px 125px;
        }
         #all{
            width: 350px;
            height: 100%;
        }
        # box{
            width: 350px;

        }
        .hua{
            text-decoration: line-through;
        }
         #all{
            width: 305px;
            margin: 0 auto;
        }
        .top{
            position: fixed;
            top: 350px;
            right: 0;
            width: 35px;
            height: 35px;
            background: red;
            color: white;
            border: 0;
            outline: 0;
        }
    </style>
    <script src="jquery-1.8.3.js"></script>
</head>
<body>
<div id="all">
    <div id="box">
        <!--<div class="data">
            <img src="img/1.jpg" alt=""/>
            <div class="mai">买一送一特价大放送</div>
            <div class="bao">包邮</div>
            <div class="jia">￥<span>2</span></div><div class="hua">原价&nbsp;￥<span>20</span></div>
        </div>-->
    </div>

    <button class="top">回到顶部</button>
    <button class="more">加载更多</button>
</div>
</body>
</html>

<script>
    $(".top").hide();
    $.ajax({
        url: "data.json",
        type:"get",
        success: function(data){
            var num=0;
            var seed=6;//滚动条数

                function moreTwo(){
                    var html="";
                    for(var k=num;k<num+seed&&k<data.length;k++){
                        html+="<div class='data'>"+
                        "<img src='"+data[k].imgs+"' alt=''/>"+
                                "<div class='mai'>"+data[k].title+"</div>"+
                                "<div class='bao'>包邮</div>"+
                                "<div class='jia'>￥<span>2</span></div><div class='hua'>原价&nbsp;&nbsp;&nbsp;&nbsp;￥<span>20</span></div>"+
                        "</div>";

                        //判断是否还有数据
                        if((k+1)>=data.length){
                            $(".more").html("我是有底线的");
                        }
                    }

                    $("# box").append(html);

                }//moveTwo

            //点击加载
            $(".more").click(function(){
                    num+=seed;
                moreTwo();
            });

            moreTwo();

            //回到顶部
            $(".top").click(function(){
                $('body,html').animate({scrollTop:0},500);
            });

            //距离加载数据
            $(window).scroll(function(){
                var heightAll=$(document).height(); //获取页面长度
                var lookAll=$(window).height();//获取可视区域
                var scrAll=$(window).scrollTop();//获取滑动距离

                var hAll=heightAll+lookAll;

               //滑动加载页面的条件
                if(hAll>=scrAll){
                    num+=seed;
                 moreTwo();
                }

               //top按钮显示的条件
                if(scrAll>=350){
                    $(".top").show();
                }
            });

        }//success
    });
</script>

//json的数据 名叫data.json   (数据可添加)
[
  {"imgs":"img/1.jpg","title":"买就送","bao":"包邮","price0":"20","price1":"2"},
  {"imgs":"img/2.jpg","title":"买就送","bao":"包邮","price0":"38","price1":"1"},
  {"imgs":"img/3.jpg","title":"买就送","bao":"包邮","price0":"280","price1":"20"},
  {"imgs":"img/4.jpg","title":"买就送","bao":"包邮","price0":"270","price1":"45"}
]
yuehui177
关注
回到顶部的按钮
天天的博客
12-25 1572
这个一般都是在页面比较高，一般右下角就有个按钮，一点就回到了页面的顶部！ 布局非常简单！ 就定在右下角呗！ 当点击的时候，让scrollTop 值准建变为0 !(用到简单的缓冲动画） <script> window.onload = function(){ var flag = false; // false 为手动...
Back Top ②（回到顶部）
前端向朔
08-16 1315
<script> $(function() { $.fn.manhuatoTop = function(options) { var defaults = { showHeight : 200, speed : 1000 }; var opt
TOP按钮
weixin_30699831的博客
02-17 223
TOP按钮 博客园页面添加返回顶部TOP按钮 进入网页管理->设置 在"页面定制CSS代码"中添加如下css样式，当然你可以改为自己喜欢的样式 此处可以将背景色background-color改为: background:url(http://images.cnblogs.com/cnblogs_com/gitwow/1393973/o_o_o_toTop.png) no-re...
top按钮返回顶部
最新发布
WUXIANJINBU的博客
06-19 115
【代码】top按钮返回顶部。
点击top返回到页面顶部
panghaichun的博客
01-13 601
制作需求： 1. 当页面窗口的高度大于50时top按钮出现 2. 点击top按钮时返回到页面顶部$(document).radey(function(){ $(window).scroll(function(){ if($(window).scrollTop()>50){ $(".top").fadeIn(1500); } else{ $
轻盈回顶：教你轻松实现网页返回顶部功能
m0_55392280的博客
11-12 5487
在当今互联网时代，用户体验已成为前端开发的核心关注点。随着移动设备的普及，浏览长篇幅内容时，用户可能会感到操作繁琐，而回到顶部功能则为用户提供了一种快速定位到页面顶部的便捷方式。实现回到顶部功能已成为前端开发者必备的技能。本文旨在实现回到顶部功能的方法，以帮助开发者轻松掌握这一技术，提升用户体验。提示：以下是本篇文章正文内容，可供参考以上就是今天要讲的内容，本文仅仅简单介绍了回到顶部功能的实现，它能帮助用户快速定位到页面顶部，提高浏览体验。
一个漂亮的top按钮特效
weixin_30919235的博客
08-27 269
<!DOCTYPE HTML> <html> <head> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <style> #top {background:url(rocket_up.png) 0px 0px ...
js+css实现回到顶部按钮（back to top）
10-22
在网页设计中，"回到顶部"（Back to Top）按钮是一个常见的功能，它允许用户快速地将页面滚动回顶部，而无需手动滑动。本文将详细介绍如何使用JavaScript（js）和CSS（css）来实现这一功能。 首先，我们来看HTML...
制作回到顶部按钮
03-29
第一种情况,当页面在顶部的时候，回到顶部按钮是不会出现的。 (此图片来源于网络，如有侵权，请联系删除! ) 第二种情况,当页面在离开顶部一定距离的时候，回到顶部按钮出现 (此图片来源于网络，如有侵权，请联系删除...
返回页面顶部top按钮通过锚点实现(自写)
09-05
标题中的“返回页面顶部top按钮通过锚点实现(自写)”指的是在网页设计中，为了方便用户快速回到页面顶部而创建的一种交互功能。通常，当用户在浏览长篇内容或填写长表单时，这样的功能变得尤为重要。描述中提到的...
js+css实现回到顶部按钮（back to top）.docx
01-19
"JS+CSS实现回到顶部按钮（Back to Top）" 通过本文，我们可以学习到使用JS和CSS实现回到顶部按钮的方法。这个功能可以在页面滚动时出现一个回到顶部的按钮，以便用户快速回到页面的顶部。 首先，我们需要在HTML中...
返回top写法技巧
11-27 108
HTML<a href="#" class="fixed">top</a> CSS: .fixed{ padding: 20px 15px; text-transform: uppercase; position: fixed; left:50%; bottom: 60px; margin...
jQuery返回顶部插件-toTop
熊宗的博客
10-31 2446
简介 jQuery.toTop 是一款轻量级的 jQuery 返回顶部插件，压缩后不到 1KB。同时它也是可定制的，你可以设置是否自动隐藏、滚动时间、位置等等。 在线演示及下载 在线演示 本地下载 使用方法 引入文件 script src="jsjquery.min.js">script> script src="
按top按钮返回顶部
a11979的博客
01-04 1059
1.首先确认返回顶部的按钮 <body> *** <span id="top">↑</span> //回到顶部按钮 </body> 2.一般将这个按钮定位在右下角，默认隐藏 <style> #top{ width: 60px; height: 40px; text-align: center; line-height: 40px; position: fi
html返回顶部按钮插件,返回顶部按钮
weixin_32743045的博客
06-17 460
返回顶部的开发背景当用户在使用Chrome浏览很“长”的一段网页的时候(比如国内大型门户网站、QQ空间动态、搜索引擎的结果页)，往往需要使用鼠标滑轮连续滑动多次之后才能跳转到页面的底部，而对于网页内容非常多并且用户对网页的中间和顶部信息不感兴趣或想要快速查看到网页底部的用户来说使用鼠标滑轮慢慢滑动的过程往往需要浪费用户大量宝贵的时间。而当用户滑动到底部之后发现并没有感兴趣的内容，或者当用户一路浏览...
点击按钮回到顶部效果
denghun4363的博客
03-29 263
前言 逛博客的时候发现很多人都有设置一个回到顶部的Button,觉得很实用，便在慕课网找到一个教程。并运用在博客上，喜欢的人也可以学习。 正文 1.代码部分 css代码 #box{ width: 1190px; margin: 0 auto; } #btn{ width: 40px; height: 40px; ...
jquery top 按钮回到页面最顶端的实现
liu709127859的专栏
04-09 767
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Title&lt;/title&gt;    &lt;style&gt;       .container{    background-color:
Back Top ①（回到顶部）原生JS实现
前端向朔
08-13 3935
button<a href="javaScript:void(0);" id="btn"></a>style<style> #btn { display: none; width: 40px; height: 40px; position: fixed; right
回到顶部的几种实现方法
热门推荐
越努力，越幸运！
12-21 4万+
【1】使用默认链接锚点 添加一个a链接，设置a链接的href属性值为"#top"即可实现 <body> <div>我在顶部</div> <!-- 很多内容 --> <br><br><br><br><br><br><br><b...
vue一键回到顶部按钮
12-02
根据提供的引用内容，我们可以实现一个基于Vue的一键回到顶部按钮，具体实现过程如下： 1. 在Vue组件中添加一个按钮元素，用于触发回到顶部事件。 2. 在Vue组件的data中添加一个变量isShowBackTop，用于控制回到顶部按钮的显示和隐藏。 3. 在Vue组件的methods中添加一个backTop方法，用于实现回到顶部的操作。在该方法中，我们可以使用window.scrollTo方法将页面滚动到顶部，并添加一个定时器，实现滚动的动画效果。 4. 在Vue组件的mounted生命周期函数中，添加一个滚动事件监听器，用于判断是否需要显示回到顶部按钮。当页面滚动高度大于屏幕高度时，将isShowBackTop变量设置为true，否则设置为false。 下面是一个示例代码： ```vue <template> <div> <!-- 回到顶部按钮 --> <div v-show="isShowBackTop" class="back-top" @click="backTop"> <i class="iconfont icon-top"></i> </div> <!-- 页面内容 --> <div class="content"> ... </div> </div> </template> <script> export default { data() { return { isShowBackTop: false // 控制回到顶部按钮的显示和隐藏 } }, methods: { backTop() { // 回到顶部操作 let currentScroll = document.documentElement.scrollTop || document.body.scrollTop if (currentScroll > 0) { window.requestAnimationFrame(this.backTop) window.scrollTo(0, currentScroll - (currentScroll / 5)) } } }, mounted() { // 滚动事件监听器 window.addEventListener('scroll', () => { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop this.isShowBackTop = scrollTop > window.innerHeight }) } } </script> <style> .back-top { position: fixed; right: 50px; bottom: 50px; width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #ccc; border-radius: 50%; cursor: pointer; } .icon-top { font-size: 24px; } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值