app/template/default/Block/page_top_scroll.twig line 1

Open in your IDE?
  1. <style>
  2. /*全てに適用*/    
  3.     .ec-blockTopBtn{
  4.         display: none !important;
  5.     }
  6.     
  7.     #pageTop{
  8.         margin: 50px 0 0 0;
  9.         background-color: #404040;
  10.         height: 60px;        
  11.     }
  12.     .scroll{
  13.     margin: 10px 0 10px 48%;    
  14.         
  15.     }
  16. /*ウィンドウ幅が767px以上の場合に適用*/
  17. @media screen and (min-width: 767px) { 
  18.     
  19.     .ec-footerRole{
  20.     margin-top: 0 !important;
  21.     border-top: 0px !important;
  22.     }
  23.     }
  24.     
  25. /*ウィンドウ幅が最大767pxまでの場合に適用*/
  26. @media screen and (max-width: 767px) { 
  27.     .scroll{
  28.     margin: 10px 0 10px 43%;    
  29.     }
  30.     .ec-footerRole{
  31.     margin-top: 5px !important;
  32.     }
  34. </style>
  38. <div id="pageTop">
  39.     <img src="/html/user_data/img/anchor.jpg" alt="" class="scroll">
  40. </div>
  43. <script>
  44. //■page topボタン
  46. $(function(){
  47. var topBtn=$('#pageTop');
  48. topBtn.hide();
  50.  
  52. //◇ボタンの表示設定
  53. $(window).scroll(function(){
  54.   if($(this).scrollTop()>80){
  56.     //---- 画面を80pxスクロールしたら、ボタンを表示する
  57.     topBtn.fadeIn();
  59.   }else{
  61.     //---- 画面が80pxより上なら、ボタンを表示しない
  62.     topBtn.fadeOut();
  64.   }
  65. });
  67.  
  69. // ◇ボタンをクリックしたら、スクロールして上に戻る
  70. topBtn.click(function(){
  71.   $('body,html').animate({
  72.   scrollTop: 0},500);
  73.   return false;
  75. });
  78. });
  79.     </script>