精华内容
下载资源
问答
  • html 返回顶部

    千次阅读 2018-07-17 20:32:14
    DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>LOVE YOU</title> <style > img{ ...
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>LOVE YOU</title>
    	<style >
    		img{
    			border:0;
    		}
    	</style>
    </head>
    	<body>
    	<div onclick="GoTop();" style = 'width:50px;height:50px;background-color: black;color: white;position:fixed;bottom:20px;right: 20px'>
    		返回顶部
    	</div>
    	
    	<div style = 'height:5000px;background-color: #dddddd;'>
    		hello
    	</div>
    	
    	<script >
    		function GoTop(){
    			document.body.scrollTop = 0;
    		}
    	</script>
    	
    	</body>
    </html>
    

     

    展开全文
  • html返回顶部效果

    千次阅读 2018-02-27 10:30:06
    返回顶部效果

    css

    .backToTop {
        display: none;
        background-color: #000;
        font-size: 12px;
        position: fixed;
        right: 10px;
        bottom: 100px;
        cursor: pointer;
        height: 38px;
        width: 38px;
        display: block;
        background: #2f4050;
        padding: 9px 8px;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        opacity: .5;
    }

    js

    (function() {
        var $backToTopTxt = "返回顶部",
            $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
            .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
                $("html, body").animate({
                    scrollTop: 0
                }, 120);
            });
    })();
    展开全文
  • 1.首先设置一个返回顶部的标签 <div id="totop"> <a href="javascript:;" id="btn">顶部</a> </div> 如果设置href="#"的话,超链接会自动存在一个瞬间返回顶部的功能,这里为了有效果的...

    1.首先设置一个返回顶部的标签

    <div id="totop">
            <a href="javascript:;" id="btn">顶部</a>
    </div>

     如果设置href="#"的话,超链接会自动存在一个瞬间返回顶部的功能,这里为了有效果的返回顶部,我们设置引入一个空脚本

    2.在body添加脚本

    <script type="text/javascript">
            window.onload = function () {
                // 1.找到页面中的按钮
                var totop = document.getElementById("btn");
                totop.style.display ="none";
                var timer = null;
    
                // 2. 给按钮绑定点击事件
                totop.onclick =function () {
                    // 周期性定时
                    timer = setInterval(function () {
                        // 3.获取滚动条距离浏览器顶端的距离
                        var backTop = document.documentElement.scrollTop || 
                        document.body.scrollTop;
    
                        // 越滚越慢
                        speedTop =backTop/5;
                        document.documentElement.scrollTop=backTop-speedTop;
                        if(backTop==0){
                            clearInterval(timer);
                        }
                    },30)
                }
                // 设置临界值
                var pageHeight =700;
                window.onscroll =function () {
                    var backTop = document.documentElement.scrollTop || 
                    document.body.scrollTop;
                    if(backTop>pageHeight){
                        totop.style.display="block";
                    }else{
                        totop.style.display="none";
                    }
    
                }
            }
    
        </script>

     

    展开全文
  • 前端HTML返回顶部小火箭

    千次阅读 2018-06-27 23:42:01
    -- 返回顶部火箭 --&gt;&lt;a onclick="topFunction()" id="myBtn" title="回顶部"&gt;&lt;img src="images/hj.png" style="width:65px;height:70px;...

    代码比较轻量,点击返回小火箭之后,下滑页面有时候会卡顿,但不影响使用哦

    1、HTML部分

    <!-- 返回顶部火箭 -->
    <a οnclick="topFunction()" id="myBtn" title="回顶部">
    <img src="images/hj.png" style="width:65px;height:70px;">

    </a>//加了小火箭图片,大小自己也调整了一下。


    2、css部分

    /*返回顶部火箭*/
       #myBtn {
        display: none; /* 默认隐藏 */
        position: fixed; 
        bottom: 20px; 
        right: 10px; 
        z-index: 99; 
        border: none;
        outline: none; 
        cursor: pointer; 
        padding: 10px; 
        border-radius: 10px; /* 圆角 */

    }

    3、js部分

    <!-- 返回顶部火箭js -->


    <script type="text/javascript">
    // 当网页向下滑动 30px 出现"返回顶部" 按钮
    window.onscroll = function() {scrollFunction()};
     
    function scrollFunction() {console.log(121);
        if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }
     
    // 点击按钮,返回顶部
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
    </script>

    这个js比较简陋,跳转不是缓动,有待优化!


    展开全文
  • Html 返回顶部代码及注释说明

    万次阅读 2018-04-02 16:56:45
    转:https://www.cnblogs.com/mind/archive/2012/03/23/2411939.html最近做了一个排行榜页面,分类较...当然这就需要结合“返回顶部”功能来取得更好的体验了。当然一般情况下首先还是要避免页面过长,内容薄弱关联...
  • HTML JS CSS jQuery 返回顶部 模仿天猫的返回顶部,关于返回顶部这个功能,绝大部分网站都有用到,算是一个细节方面的小东西,个人觉得天猫的返回顶部这个小东西做的挺好,下面便是我模仿它的代码: HTML返回...
  • HTML——返回顶部和锚点

    千次阅读 2017-10-18 19:18:20
    111111 2435345 返回顶部 --> id1 id2 1111111 2222222
  • 返回顶部

    千次阅读 2015-12-20 16:17:14
    点击返回顶部,简单易学 效果图: 第一步:将返回按钮fixed到具体位置后隐藏 第二步:当浏览器滚动条大于多少像素时... 返回顶部 *{margin:0;padding:0;} p{width:300px; height:200px;backgro
  • HTML页面中返回顶部的几种实现

    千次阅读 2019-12-24 22:49:50
      最近在开发网站需要制作返回顶部按钮,但是我主要为后端开发,对前端不太熟练,经过网上资料查询,制作出了返回顶部的按钮,下面是两种简单的方式,记录一下.喜欢本网站的朋友可以收藏下,会不定期更新学习资料. 第一种...
  • 【前端】HTML底部返回顶部悬浮按钮

    千次阅读 2019-05-29 14:48:07
    CSS样式: .back-to { bottom: 55px; overflow: hidden; position: fixed; right: 10px; width: 110px; z-index: 999; } .back-to .back-top { background: url("./imag...
  • jQuery实现返回顶部

    千次阅读 2018-04-15 16:21:47
    jQuery实现返回顶部(gotop) 最常见的返回顶部大多是用 js 或者 jQ写出来的,但也有少部分直接用的 HTML 锚点实现的,自我感觉,返回顶部这个特效用锚点带来的用户体验不是很好。因为没有视觉缓冲。所以,下面用 ...
  • 效果如链接: http://liuyanzhao.com/ 只需要i两个步骤: 1.我们在网页body内最上面添加一个,方便跳到这个位置 < span ...'body,html' ...http://liuyanzhao.com/3629.html 转载请注明
  • html+css+jquery实现返回顶部功能
  • 自己上代码比较容易:这边是es6的写法,可以封装成一个组件,这样每个界面都可以用了/** * Created by wuyakun on 2017...//点击返回顶部class BackTop extends React.Component { // 渲染之后 componentDidMount() {
  • jQuery实现返回顶部功能

    千次阅读 多人点赞 2014-05-13 20:05:19
    jQuery实现返回顶部功能 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 第一种实现 一、JSP或HTML(主体结构) 在body中添加 <p id="back-to-top"><a href="#top"><span></span></a></...
  • html a标签:返回顶部代码

    千次阅读 2019-05-25 18:11:31
    <a href="javascript:scrollTo(0,0);"><li class="foot_menu">基因产品</li></a>
  • 点击缓慢滑动返回顶部

    千次阅读 2018-11-19 02:22:44
    返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置。 使用setinerval实现缓慢返回顶部 //核心js代码 var top=...
  • 返回顶部代码 缓慢的返回顶部

    千次阅读 2017-04-20 15:17:11
    $('body,html').animate({scrollTop:0},500);
  • JS实现页面返回顶部

    千次阅读 2018-07-15 21:43:35
    页面返回顶部是在Web中常见的效果,在一个很长的页面中,页面返回顶部按钮可以方便用户回到页面的顶部,增强用户体验。 这里我要实现的效果图如下: 其html代码如下: &amp;amp;lt;body style=&amp;...
  • $(".mmhhq1").click(function() { $("html,body").animate({scrollTop:0},500); }); css3过度效果 animate 返回顶部 scrollTop:0
  • 快速返回顶部

    千次阅读 2018-08-22 17:47:17
    //以1秒的间隔返回顶部 $('body,html').animate({scrollTop: 0}, 1000); }); //实现回到顶部元素的渐显与渐隐 $(window).scroll(function () { //判断距离,当距离较小时,隐藏,当距离较大时显示 if ($...
  • 当然这就需要结合“返回顶部”功能来取得更好的体验了。当然一般情况下首先还是要避免页面过长,内容薄弱关联性不够的跳出率会很高。 下面就说下简单的返回顶部效果的代码实现,附注释说明。 1. 最简单的静态返回...
  • CSS加JS实现网页返回顶部功能

    千次阅读 2019-04-21 19:50:38
    通常我们都需要一个返回顶部的功能来实现快速来到网页顶部。当然实现方式不止一种,这里我采用的最实用的一种。使用CSS+Jquery方式 代码量相对较少,容易理解。 实现原理 1.我们需要再DOM中添加自己的DIV,里面...
  • js scrollTo 实现平缓 返回顶部

    千次阅读 2015-03-22 01:22:57
    js scrollTo 实现平缓 返回顶部
  • 手机移动端返回顶部js代码

    千次阅读 2018-10-30 14:55:21
    &lt;!DOCTYPE html&gt;  &lt;html&gt;  &lt;head&gt;  &lt;meta http-equiv="...text/html;...手机移动端返回顶部js代码&lt;/title&gt;  &lt;script src
  • 如何为网页添加返回顶部按钮

    千次阅读 2013-08-16 08:51:27
    如何为网页添加返回顶部按钮   方法一:傻瓜式方法 1.在body的标签添加定位id 2.在最底部需要返回顶部的位置添加触发定位的代码 返回顶部 这种方法非常死板,必须让用户移动到正确的位置才能返回顶部。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 88,515
精华内容 35,406
关键字:

html返回顶部