実現したいこと
模写元サイトではページの上から下へスクロールすると途中からページトップボタンが表示されてfooterの右上へ止まるようになっています。
模写元サイト：https://www.delights-home.jp/contact
私の場合は、下からスクロール後に途中からページトップボタンを表示はできているのですが、止まった所がfooterの右上ではなく、footerの中に止まってしまっています。
それを模写元サイトのように右上へ止まるようにしたい。
前提
ページトップボタンは「page-top」としてfooter.phpの一番上に記述してあります。
該当のソースコード
HTML(footer.php)
12<div id ="page-top"> 3 <a href="" class="link_btn"><span class="arrow"></span></a> 4</div> 5 6<div class="js-footer-wrap"> 7<nav class="nav_contents fadeInTrigger"> 8 <div class="nav_wrap"> 9 <ul class="nav_ul"> 10 <li class="list_fadeio border_right"> 11 <a class="list_inner" href=""> 12 <p class="ttl">EVENT</p> 13 <p class="sub"></p> 14 </a><!--list_inner--> 15 </li><!--list_fadeio--> 16 17 <li class="list_fadeio"> 18 <a class="list_inner" href=""> 19 <p class="ttl">CONTACT</p> 20 <p class="sub"></p> 21 </a><!--list_inner--> 22 </li><!--list_fadeio--> 23 </ul><!--nav_ul--> 24 </div><!--nav_wrap--> 25 </nav><!--nav_contents--> 26 27 28 29 <footer class="footer_main"> 30 <div class="footer_inner"> 31 <div class="footerlogo_area"> 32 <a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/footer.png"></a> 33 <p class="logo_txt"></p> 34 </div><!--footerlogo_area--> 35 36 <div class="footer_right"> 37 <div class="footer_address"> 38 <h2 class="footer_ttl">ADDRESS</h2> 39 <div class="footer_addresstxt"> 40 <span class="store_name"></span> 41 <p class="footer_txt">⚪︎⚪︎</p> 42 </div><!--footer_addresstxt--> 43 44 45 <div class="footer_addresstxt"> 46 <span class="store_name"></span> 47 <p class="footer_txt"> 48 </div><!--footer_addresstxt--> 49 <div class="footer_addresstxt"> 50 <span class="store_name"></span> 51 <p class="footer_txt"> 52 </div><!--footer_addresstxt--> 53 54 </div><!--footer_address--> 55 56 <nav class="footer_nav"> 57 <h2 class="footer_ttl">CONTENTS</h2> 58 <div class="footer_cninner"> 59 <ul class="ftmenu"> 60 <li class="list"> 61 <a href="" class="link">ABOUT</a> 62 <ul class="sub_ul"> 63 <li class="sublist"></li> 64 <li class="sublist"></li> 65 <li class="sublist"></li> 66 </ul> 67 </li> 68 69 <li class="list"> 70 <a href="" class="link"></a> 71 <ul class="sub_ul"> 72 <li class="sublist"></li> 73 <li class="sublist"></li> 74 </ul> 75 </li> 76 77 78 <li class="list"> 79 <a href="" class="link"></a> 80 </li> 81 </ul><!--ftmenu--> 82 83 <ul class="ftmenu2"> 84 <li class=""> 85 <a href="" class="link"></a> 86 </li> 87 88 <li class=""> 89 <a href="" class="link"></a> 90 </li> 91 92 <li class=""> 93 <a href="" class="link"></a> 94 </li> 95 96 <li class=""> 97 <a href="" class="link"></a> 98 </li> 99 100 <li class=""> 101 <a href="" class="link"></a> 102 </li> 103 104 <li class=""> 105 <a href="" class="link"></a> 106 </li> 107 108 <li class="sns"> 109 <?php dynamic_sidebar( "sns-widget" ); ?> 110 </li> 111 </ul><!--ftmenu2--> 112 </div><!--footer_cninner--> 113 </nav><!--footer_nav--> 114 </div><!--footer_right--> 115 </div><!--footer_inner--> 116 117 </footer><!--footer_main--> 118 119</div><!--js-footer-wrap--> 120<?php wp_footer(); ?> 121</body> 122</html>
css
1 #page-top {2 display: flex;3 justify-content:right;4 right: 0;5 z-index: 99;6 position: relative;7 }8 #page-top .link_btn {9 position: relative;10 display: flex;11 justify-content: center;12 align-items: center;13 width: 45px;14 height: 45px;15 color: #fff;16 background: #433f37;17 }18#page-top .arrow {19 display: inline-block;20 margin-top: 6px;21 vertical-align: middle;22 color: #fff;23 line-height: 1;24 position: relative;25 width: 1.2em;26 height: 0.07em;27 background: currentColor;28 transform: rotate(-90deg);29 right: -8%;30}31#page-top .arrow::before {32 content: '';33 width: 0.75em;34 border: 0.1em solid currentColor;35 border-left: 0;36 border-bottom: 0;37 transform: rotate(45deg);38 transform-origin: top right;39 position: absolute;40 color: #fff;41 right: -0.06em;42 box-sizing: border-box;43}44/*nav-contents*/45.nav_contents {46 position: relative;47 background-color: #e1e3df;48 z-index: 98;49}50.nav_wrap {51 width: calc(100% - 40px); max-width: 1085px;52 margin: auto;53}54.nav_contents .nav_ul {55 display: grid;56 grid-template-columns: repeat(2, 1fr);57 grid-template-rows: 200px;58 padding: 0;59}60.nav_contents .nav_ul .list_fadeio{61 display: flex;62 align-items: center;63 justify-content: center;64}65.nav_contents .nav_ul .list_fadeio.border_right{66 border-right: 1px solid #ced0ca;67}68 69.nav_contents .nav_ul .list_fadeio.border_right .list_inner .ttl,70.nav_contents .nav_ul .list_fadeio .list_inner .ttl{71 display: flex;72 align-items: flex-end;73 font-family: "Cormorant", serif;74 color: #433f37;75 font-size: 40px;76 letter-spacing: 2px;77 text-align: center;78 margin-bottom: 0;79}80.nav_contents .nav_ul .list_fadeio.border_right .list_inner .sub,81.nav_contents .nav_ul .list_fadeio .list_inner .sub{82 font-family: "Noto Serif JP", sans-serif;83 color: #433f37;84 font-size: 15px;85 letter-spacing: 1px;86 align-items: flex-end;87 text-align: center;88}89.footer_main {90 position: relative;91 margin-top: 70px;92 margin-bottom: 35px;93 }94.footer_main .footer_inner {95 display: flex;96 justify-content:space-between;97 width:calc(100%-40px);98 max-width: 1160px!important;99 margin: auto;100 }101 .footer_main .footer_inner .footerlogo_area img {102 height: 50px;103 }104 .footer_main .footer_inner .footerlogo_area .logo_txt {105 text-align: center;106 font-family: "Shippori Mincho",serif;107 font-size: 14px;108 line-height: 1;109 margin-top: 20px;110 }111 .footer_main .footer_inner .footer_right{112 display: grid;113 grid-template-columns: 220px 1fr;114 gap:45px;115 }116 .footer_main .footer_inner .footer_right .footer_ttl{117 font-family: "Cormorant",serif;118 font-weight: bold;119 font-size: 15px;120 letter-spacing: 0;121 line-height: 1;122 border-bottom: 1px solid #ced0ca;123 padding-bottom: 27px;124 margin-bottom: 25px;125 }126.footer_main .footer_inner .footer_right .footer_addresstxt {127 font-family: "Noto Serif JP", sans-serif;128 font-size: 14px;129 }130.footer_main .footer_inner .footer_right .footer_addresstxt .footer_txt {131 margin-top: 8px;132 }133.footer_main .footer_inner .footer_right .footer_cninner{134 position: relative;135 display: flex;136 }137.footer_main .footer_inner .footer_right .footer_cninner .link {138 font-family: "Cormorant", serif;139 font-weight: normal;140 letter-spacing: 2px;141 font-size: 17px;142 color: #433f37;143 }144 .footer_main .footer_inner .footer_right .footer_cninner .sub_ul{145 font-family: "Noto Serif JP", sans-serif;146 font-size: 13px;147 font-weight: bold;148 color: #433f37;149 letter-spacing: 1px;150 margin-top: 15px;151 margin-bottom: 20px;152 padding-left: 0;153 line-height: 1.5;154 }155 .footer_main .footer_inner .footer_right .footer_cninner .ftmenu2{156 font-family: "Noto Serif JP", sans-serif;157 font-size: 15px;158 color: #433f37;159 line-height: 2;160 }161}
js
1jQuery(function() {2 const pageTop = jQuery("#page-top");3 pageTop.hide();4 jQuery(window).scroll(function() {5 if (jQuery(this).scrollTop() > 100) {6 pageTop.fadeIn();7 } else {8 pageTop.fadeOut();9 }10 });11 pageTop.click(function() {12 jQuery("body,html").animate(13 {14 scrollTop: 0,15 },16 50017 );18 return false;19 });20 jQuery(document).ready(function () {21 jQuery("#page-top").hide();22 jQuery(window).on("scroll",function(){23 scrollHeight = jQuery(document).height(); 24 scrollPosition = jQuery(window).height() + jQuery(window).scrollTop(); 25 footHeight = jQuery(".js-footer-wrap").innerHeight(); 26 if (scrollHeight - scrollPosition <= footHeight) { 27 jQuery("#page-top").css({ position: "absolute", bottom: footHeight + 0 }); 28 } else { 29 jQuery("#page-top").css({ position: "fixed", bottom: "0" }); 30 }31 });32 });33});
0 コメント