ecshop模板教程——类似淘宝滚屏漂浮返回

商品详细页(goods.dwt)由于添加图片内容太多，经常会照成很长的页面。使用返回按钮可以提高用户的体验，当滚屏时才会出现

制作教程如下：

第一步：打开goods.dwt加入下面代码：

在页面最下面</body>结束标签前加入代码

<div id="go_top"><a href="#"></a></div>

在页面下面的javascript中加入代码（蓝色加粗部分），如下：

onload = function(){

  changePrice();

  fixpng();

  try { onload_leftTime(); }

  catch (e) {}

  window.onscroll = function(){

     var scrollTop = document.documentElement.scrollTop;

     if(scrollTop){

        $id("go_top").style.display = 'block';

        $id("go_top").style.top = (scrollTop + document.documentElement.clientHeight - 80) + "px";

     }else{

        $id("go_top").style.display = 'none';

     }

    }

}

第二步，添加图片和css

图片如下（右键另存为或是自己做一个）

图片放到模板下的images目录

在style.css中加入代码：

#go_top{background:url(images/go_top.gif) no-repeat left top; width:28px; height:79px;right: 50px;position: absolute;display: none;}

#go_top a{display:block; height:79px; width:28px;}

到此就完成了制作

注意事项：

图片名称路径要和css中的代码样式一样