javascript实现回到顶部按钮特效

有时由于页面内容过多，每次回到顶部比较麻烦，所以记录一下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);
    }