精华内容
下载资源
问答
  • 回到顶部按钮

    2017-03-19 22:40:28
    回到顶部按钮前言最近学习使用Hexo搭建了一个博客,theme 使用的是geekman(在jakman基础修改的一个版本)。在博客中加入了回到顶部,偶然一次看到Hexo 折腾笔记中的回到顶部的百分比样式的按钮效果,很炫酷,所以自己...

    回到顶部按钮

    前言

    最近学习使用Hexo搭建了一个博客,theme 使用的是geekman(在jakman基础修改的一个版本)。

    在博客中加入了回到顶部,偶然一次看到Hexo 折腾笔记中的回到顶部的百分比样式的按钮效果,很炫酷,所以自己动手照着教程造了轮子,具体效果可进本人博客查看 iDanCy

    这里我主要针对自己的主题做出修改,可能不适用其他主题。这个按钮是一个圆形按钮,有一个实时更新的圆形进度条显示你当前阅读进度,但反应相对有些慢(逃。

    环境

    window7 32bit, hexo 3, geekman

    使用本方法,请核对环境是否和我的一致。本方法只在geekman主题测试。

    步骤

    1.修改主题下css对应的totop.styl文

    如下

    #backtoTop {
        background-color: #eee;
        border-radius: 100%;
        bottom: 5%;
        height: 48px;
        width: 48px;
        position: fixed;
        right: -100px;
        z-index: 99;
        -webkit-transition: 0.5s;
           -moz-transition: 0.5s;
                transition: 0.5s;
        &.display {right: 10px;}
    }
    .percentage {
        font-size: 16px;
        height: 48px;
        line-height: 48px;
        position: absolute;
        text-align: center;
        top: 0;
        width: 48px;
        color: #555;
        cursor: pointer;
        &:before {content:attr(data-percent);}
        &:hover:before {content:"↑";font-size:20px}
    }

    2.修改layout下的totop.ejs

    <% if (theme.totop){ %>
    <div id="backtoTop" data-action="gototop" title="<%- __('to_top') %>">
        <canvas id="backtoTopCanvas" width="48" height="48"></canvas>
        <div class="percentage"></div>
        <script src="<%- config.root %>js/totop.js"></script>
    </div>
    <% } %>

    3.修改js下的totop.js

    var bigfa_scroll = {
        drawCircle: function(id, percentage, color) {
            var width = $(id).width();
            var height = $(id).height();
            var radius = parseInt(width / 2.20);
            var position = width;
            var positionBy2 = position / 2;
            var bg = $(id)[0];
            id = id.split("#");
            var ctx = bg.getContext("2d");
            var imd = null;
            var circ = Math.PI * 2;
            var quart = Math.PI / 2;
            ctx.clearRect(0, 0, width, height);
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineCap = "square";
            ctx.closePath();
            ctx.fill();
            ctx.lineWidth = 3;
            imd = ctx.getImageData(0, 0, position, position);
            var draw = function(current, ctxPass) {
                ctxPass.putImageData(imd, 0, 0);
                ctxPass.beginPath();
                ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
                ctxPass.stroke();
            }
            draw(percentage / 100, ctx);
        },
        backToTop: function($this) {
            $this.click(function() {
                $("body,html").animate({
                    scrollTop: 0
                },
                800);
                return false;
            });
        },
        scrollHook: function($this, color) {
            color = color ? color: "#000000";
            $this.scroll(function() {
                var docHeight = ($(document).height() - $(window).height()),
                $windowObj = $this,
                $per = $(".percentage"),
                percentage = 0;
                defaultScroll = $windowObj.scrollTop();
                percentage = parseInt((defaultScroll / docHeight) * 100);
                var backToTop = $("#backtoTop");
                if (backToTop.length > 0) {
                    if ($windowObj.scrollTop() > 200) {
                        backToTop.addClass("display");
                    } else {
                        backToTop.removeClass("display");
                    }
                    $per.attr("data-percent", percentage);
                    bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
                }
            });
        }
    }
    $(document).ready(function() {
        var T = bigfa_scroll,
            totop = $("#backtoTop"),
            percent = totop.children(".percentage");
        T.backToTop(totop);
        T.scrollHook($(window), "#99ccff");
        percent.hover(function(){
            percent.addClass("fa-long-arrow-up");
            percent.css({"font-family":"FontAwesome"});
        },function(){
            percent.removeClass("fa-long-arrow-up");
            percent.removeAttr("style");
        });
    });

    匆匆把昨天所做的工作做个了总结,终于搞完了。居然是实验室最后一个走的 orz…


    如有不妥当之处,麻烦指出,谢谢:)

    展开全文
  • 制作回到顶部按钮

    2021-03-29 21:06:24
    第一种情况,当页面在顶部的时候,回到顶部按钮是不会出现的。 (此图片来源于网络,如有侵权,请联系删除! ) 第二种情况,当页面在离开顶部一定距离的时候,回到顶部按钮出现 (此图片来源于网络,如有侵权,请联系删除...
  • 浏览网页时,当滚动条滚动的时候,会出现回到顶部...制作回到顶部按钮利用了div的border的特性绘制了三角形箭头.arrow{border: 9px solid transparent;border-bottom-color: #3DA0DB;width: 0px;height: 0px;top:0px...

    浏览网页时,当滚动条滚动的时候,会出现回到顶部的按钮,有的按钮是通过图片实现的,但是其实也可以通过纯css+javascript的方式来实现它。

    制作回到顶部按钮

    利用了div的border的特性绘制了三角形箭头

    .arrow{

    border: 9px solid transparent;

    border-bottom-color: #3DA0DB;

    width: 0px;

    height: 0px;

    top:0px

    }

    其他的就看看注释吧,很简单

    doc

    .arrow{

    border: 9px solid transparent;

    border-bottom-color: #3DA0DB;

    width: 0px;

    height: 0px;

    top:0px

    }

    .stick{

    width: 8px;

    height: 14px;

    border-radius: 1px;

    background-color: #3DA0DB;

    top:15px;

    }

    #gotop div{

    position: absolute;

    margin: auto;

    right: 0px;

    left: 0px;

    }

    #gotop{

    background-color: #dddddd;

    height: 38px;

    width: 38px;

    border-radius: 3px;

    display: block;

    cursor: pointer;

    position: fixed;

    right: 50px;

    bottom: 100px;

    display: none;

    }

    $(function(){

    for(var i =0 ;i <100;i++){

    $("#article").append("

    xxxxxxxxxx

    ")

    }

    })

    $(function(){

    $(window).scroll(function(){ //只要窗口滚动,就触发下面代码

    var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度

    if( scrollt >200 ){ //判断滚动后高度超过200px,就显示

    $("#gotop").fadeIn(400); //淡入

    }else{

    $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动

    }

    });

    $("#gotop").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部

    $("html,body").animate({scrollTop:"0px"},200);

    });

    });

    展开全文
  • 主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下
  • qq在线客服回到顶部按钮首页,想知道怎么弄qq在线客服,可以去博客看看很简单
  • jQuery 实现回到顶部按钮效果 请将页面向下滚动,点击返回顶部
  • 有时由于页面内容过多,每次回到顶部比较麻烦,所以记录一下JavaScript实现回到顶部按钮特效的代码,便于以后备用。 css代码: /*实现回到顶部按钮特效*/ .box { position: fixed; right: 10px; bottom: 10px;...

    有时由于页面内容过多,每次回到顶部比较麻烦,所以记录一下JavaScript实现回到顶部按钮特效的代码,便于以后备用。

    css代码:

    		/*实现回到顶部按钮特效*/
            .box {
                position: fixed;
                right: 10px;
                bottom: 10px;
                height: 50px;
                width: 50px;
                text-align: center;
                padding-top: 20px;
                background-color: lightblue;
                border-radius: 20%;
                overflow: hidden;
            }
            .box:hover:before {
                top: 50%
            }
            .box:hover .box-in {
                visibility: hidden;
            }
            .box:before {
                position: absolute;
                top: -50%;
                left: 50%;
                transform: translate(-50%, -50%);
                content: '回到顶部';
                width: 40px;
                color: peru;
                font-weight: bold;
            }
            .box-in {
                visibility: visible;
                display: inline-block;
                height: 20px;
                width: 20px;
                border: 3px solid black;
                border-color: white transparent transparent white;
                transform: rotate(45deg);
            }
    

    html代码:

    	<%--回到顶部按钮样式--%>
        <div id="box2" class="box">
            <div class="box-in"></div>
        </div>
    
    	<%--锚点定位--%>
    	<div style="margin-bottom: 20px;">
            <a class="btn btn-info" id="cts">cts</a>&nbsp;&nbsp;
        </div>
    
    	<%-- cts工具 --%>
        <div>
            <input type="checkbox" id="cts_checkbox"/>
            <h2 id="cts_content" class="h2_style title_style ">cts</h2>
        </div>
        <c:forEach items="${ctsXml.gmfList}" var="gmf" varStatus="status">
            <c:if test="${gmf.gmsFails.size()>0}">
                <form id="cts${status.count}">
                <h5><span class="module">Summary:</span></h5>
                <c:if test="${gmf.gmsFails.size()>1}">
                    <div>
                        <input type="text" name="summary" class="form-control input_style" value="【GMS】【CTS】【自定义】${gmf.abi} ${gmf.module_name}包测试出现${gmf.gmsFails.size()}条Fail" />
                    </div>
                </c:if>
                <c:if test="${gmf.gmsFails.size()==1}">
                    <div>
                        <input type="text" name="summary" class="form-control input_style" value="【GMS】【CTS】【自定义】${gmf.abi} ${gmf.module_name}包 ${gmf.gmsFails.get(0).testCase_name}#${gmf.gmsFails.get(0).test_name}测试Fail" />
                    </div>
                </c:if>
           	 	<h5>${gmf.abi} ${gmf.module_name}</h5>
                <table class="table table-condensed table-bordered " width="100%" name="cts">
                    <thead>
                    <tr class="head_color">
                        <th width="5%"><input type="checkbox"  onclick="checkModule('${gmf.abi} ${gmf.module_name}',this)"/>全选</th>
                        <th width="">Test</th>
                        <th width="8%">Result</th>
                        <th width="15%">Waived</th>
                        <th width="15%">Troubleshooting</th>
                    </tr>
                    </thead>
                    <tbody id="${gmf.module_name}">
                    <c:forEach items="${gmf.gmsFails}" var="fail">
                        <tr>
                            <td class="td_checkbox"><input type="checkbox" name="${gmf.abi} ${gmf.module_name}"/></td>
                            <td class="td_color">${fail.testCase_name}#${fail.test_name}</td>
                            <td class="fail_color">Fail</td>
                            <td class="td_color td_icon_waived" >
                                <c:if test="${fail.status != null or fail.mtk_project_waived != null or fail.waived != null}">
                                <span class="glyphicon glyphicon-eye-open" onclick="waivedClick('${fail.status}','${fail.mtk_project_waived}','${fail.waived}')"></span>
                                </c:if>
                            </td>
                            <td class="td_color td_icon_trouble" >
                                <c:if test="${fail.gms_tool != null or fail.mtk_project_trouble != null or fail.troubleshooting != null}">
                                <span class="glyphicon glyphicon-eye-open" onclick="troubleClick('${fail.gms_tool}','${fail.mtk_project_trouble}','${fail.troubleshooting}')"></span>
                                </c:if>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
                <span class=""><h5>Issue Nature:</h5>
                    <select id="issueNature2" name="customfield_10202" class="selectpicker td_color"  data-size="6" data-style="btn" data-width="25%" data-live-search="false">
                        <option value="aaa">aaa</option>
                        <%--<c:forEach items="${buildName}" var="i" varStatus="status">
                            <option>${i}</option>
                        </c:forEach>--%>
                    </select>
                </span>
              	<div>
                  <h5>Description:</h5>
                  <textarea name="description" class="form-control td_color text_style"  rows="22"><c:if test="${gmf.gmsFails.size()>1}">
    【GMS】【CTS】【自定义】${gmf.abi} ${gmf.module_name}包测试出现${gmf.gmsFails.size()}条Fail</c:if><c:if test="${gmf.gmsFails.size()==1}">
    【GMS】【CTS】【自定义】${gmf.abi} ${gmf.module_name}包 ${gmf.gmsFails.get(0).testCase_name}#${gmf.gmsFails.get(0).test_name}测试Fail</c:if>
    
    A)Preconditions:
    测试工具:CTS${suite_version}
    工具服务器路径:
    
    B)Operation:
    整跑CTS:run cts
    
    C)Expect result:
    PASS
    
    D)Test result:<c:if test="${gmf.gmsFails.size()==1}">
    ${gmf.module_name}测试出现1条Fail
    ${gmf.gmsFails.get(0).testCase_name}#${gmf.gmsFails.get(0).test_name}
    </c:if><c:if test="${gmf.gmsFails.size()>1}">
    ${gmf.module_name}测试出现${gmf.gmsFails.size()}条Fail<c:forEach items="${gmf.gmsFails}" var="fail">
    ${fail.testCase_name}#${fail.test_name}</c:forEach></c:if>
    
    E)Ref Phone Results if needed:
    F)Problem Risk:
    MUST
    G)Log and Screenshot address:
    ${ctsXml.xml_path_name}</textarea>
             </div>
             </form>
             </c:if>
         </c:forEach>
    

    js代码:

    	// 回到顶部
        var timer = null;
        box2.onclick = function () {
            cancelAnimationFrame(timer);
            //获取当前毫秒数
            var startTime = +new Date();
            //获取当前页面的滚动高度
            var b = document.body.scrollTop || document.documentElement.scrollTop;
            var d = 500;
            var c = b;
            timer = requestAnimationFrame(function func() {
                var t = d - Math.max(0, startTime - (+new Date()) + d);
                document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
                timer = requestAnimationFrame(func);
                if (t == d) {
                    cancelAnimationFrame(timer);
                }
            });
        }
    
    	//锚点定位到页面的某部分内容
     	document.querySelector("#cts").onclick = function () {
            document.querySelector("#cts_content").scrollIntoView(true);
        }
    
    展开全文
  • 回到顶部按钮的制作

    2016-05-15 21:56:56
    回到顶部按钮的制作

    功能:

    1.按钮在滚动调滚动到第二屏时显示;

    2.点击按钮,滚动条由快到慢回到顶部;

    3.回到顶部过程中若鼠标滚动滚动条则停止回到顶部;


    HTML代码:

    <body>
        <div class="container">
           <img src="images/tb_bg.jpg">
        </div>
        <a href="javascript:;" id="btn" title="回到顶部">
        </a>
    </body>

    css代码:

    *{
                padding:0;
                margin:0;
            }
            .container{
                width: 1190px;
                margin: 0 auto;
                position: relative;
            }
            #btn{
                width: 40px;
                height: 40px;
                overflow: hidden;
                position: fixed;
                right: 20px;
                bottom: 20px;
                background: url("images/top_bg.png") no-repeat left top;
                display: none;
            }
            #btn:hover{
                width: 40px;
                height: 40px;
                background: url("images/top_bg.png") no-repeat left -40px;
            }

    js代码:

    <script type="text/javascript">
        function addLoadEvent(func){
            var oldοnlοad=window.onload;
            if(typeof window.onload!='function'){
                window.οnlοad=func();
            }
            else{
                window.οnlοad=function(){
                    oldonload();
                    func();
                }
            }
        }
        function startMain(){
            var btn=document.getElementById("btn");
            var timer=null;//定时器
            var isGoUp=true;//滚动条在滚动
            var clientHeight=document.documentElement.clientHeight;//获取页面可视区的高度
            //滚动条滚动时触发
            window.οnscrοll=function(){
                var distance=document.documentElement.scrollTop||document.body.scrollTop;
                if(distance>=clientHeight){
                    btn.style.display='block';
                }else{
                    btn.style.display='none';
                }
                if(!isGoUp){
                    clearInterval(timer);
                }
                isGoUp=false;
            };
            btn.οnclick=function(){
                timer=setInterval(function(){
                    //获取与顶部的距离
                    isGoUp=true;
                    var distance=document.documentElement.scrollTop||document.body.scrollTop;//兼容IE
                    if(distance==0){
                        clearInterval(timer);
                    }
                    //减少距离顶部的距离
                    var speed=Math.floor(-distance/6);
                    document.documentElement.scrollTop=document.body.scrollTop=distance+speed;
    //                console.log(distance);
                },30)
            }
        }
        addLoadEvent(startMain);
    </script>


    展开全文
  • 小程序制作回到顶部按钮

    万次阅读 热门讨论 2017-01-08 14:12:07
    第一种情况,当页面在顶部的时候,回到顶部按钮是不会出现的。第二种情况,当页面在离开顶部一定距离的时候,回到顶部按钮出现接下就是对代码的分析了: 在这里我们如果要使用滚动事件的话,小程序规定 最外层一定要...
  • 快速回到顶部按钮

    2018-03-26 11:28:42
    相信大部分做网页开发的都需要这个快速回到顶部按钮的功能吧,那么接下来我给出我觉得很简单的解决方法。直接给出demo:html页面:1.&lt;head&gt;&lt;/head&gt;部分先引入一个文件:(添加下面一句...
  • van-button回到顶部按钮

    2021-02-24 11:46:07
    -- 回到顶部按钮 --> <van-button type="info" class="backTop" color="#5cccfb" plain hairline round @click="backTop" icon="arrow-up" v-if="showgo" > //检测滚动条高度,大于300时出现...
  • 现在很多网页的右下角都会设有一个回到顶部按钮来方便用户使用,经过学习对回到顶部按钮有了初步的了解,下面就来谈谈我的理解。  制作一个回到顶部按钮大致上分为3步:  (1)  #btn1 {position:fixed; ...
  • 实现”回到顶部按钮”这个功能要满足两个要求, 1. 当浏览器下拉时按钮显示,回到顶部时按钮隐藏; 2. 点击按钮时,通过jquery的animate函数滑到顶部。 &lt;!DOCTYPE html&gt; &lt;html&gt;...
  • wordpress并不是所有主题都有回到顶部的按钮,回到顶部按钮对于网站的用户体验来说,是非常重要的!那么如何给wordpress添加回到顶部按钮。 下载插件To Top 1、点击菜单插件->安装插件 2、搜索插件并安装。如下...
  • js隐藏与显示回到顶部按钮 window.onscroll = function () { if (document.documentElement.scrollTop + document.body.scrollTop > 100) { document.getElementById("scrollto").style.display = "block"; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 979
精华内容 391
关键字:

回到顶部按钮