shopify代码模板（给shopify添加返回顶部按钮代码(专门为小白准备)）shopify编程语言，太疯狂了，

如是说此机能前，我先给我们展现最后的效用，如下表右图图右图；

一，为何很大要加进标识符理据：虽然shopify许多主轴没回到顶端的方便快捷按键，或是方便快捷按键不漂亮，因此应用程序同时实现的回到顶端会减慢下载速度，因此你能考量如下表右图方式，透过加进写好的标识符同时实现他们加进回到顶端按键，间接拷贝如下表右图标识符，将其填入theme.liquid文档里头的</head>条码前面方可。

有关找出适当边线方向如下表右图截屏右图：

<!--to top start--> <style> .box{z-index:999; position:fixed; right:10px; bottom: 70px; height:50px; width: 50px; text-align:center; padding-top:20px; background-color:#4d90fe!important; 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:TOP; 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); } h1{font-size:22px!important; text-transform: capitalize!important;} .title{text-transform: capitalize!important;} h3{text-transform:capitalize!important;} .collection_title{text-transform:capitalize!important;} </style> <div id="box" class="box"> <div class="box-in"></div> </div> <script> var timer = null; box.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); } }); } </script> <!--to top end-->

二，式样如下表右图图因此：滑鼠 终端到下面，会变为黄色字体TOP，滑鼠移开，字体消失，变为白色尖角。

三，有关更改它显示的式样以及内容；

更改内容：修改content:TOP;里头的TOP，替换成所需内容；

更改背景：修改.box{background-color: #4d90fe!important;}里头的#4d90fe，换成所需背景颜色码；

更改字体颜色：修改.box:before {color: peru;}里头的peru颜色值；

更改按键的尺寸：修改.box{height:50px;width: 50px;}里头的height和width像素值；

更改离右边边框的距离：修改.box{right:10px;}里头10px，替换成所需像素值；

更改离网页底部的距离：修改.box{bottom:70px;}里头的70px,替换成所需像素值；