Shopify页面滑动时底部浮现返回顶部按钮_shopify 固定悬浮按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/a19777888/article/details/117326874

本文介绍了如何在Shopify页面中实现在滚动时底部出现返回顶部按钮的功能。提供了两种方法：一是全局应用，通过编辑theme.liquid文件；二是针对特定页面，直接在相应页面代码段中插入代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Shopify页面滑动时底部浮现返回顶部按钮

两种方法可以实现这种分为独立页面还是所有页面

第一种：概括所有页面

登录shopify打开在线商店找到Online Store右侧所属模板下拉栏选择Edit code

然后找到Layout下的theme.liquid文件（ps：比较建议放到文件最底下例如下图）

源码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<style>
		*{ margin:0; padding:0; list-style:none;}
		.lanrenzhijia_top{ width:40px; height:40px; position:fixed; right:80px; bottom:35px; z-index:9999; display:none;  background-color: red; }
		.top_arrows {
		    width: 15px;
		    height: 15px;
		    border-top: 4px solid #fff;
		    border-right: 4px solid #fff;
		    transform: rotate(
		-45deg
		);
		display:inline-block;
		    margin: 15px 13px 8px 13px;
		}
		</style>
		<div class="lanrenzhijia_top"><span href="javascript:;" class=" top_arrows"></span></div>
		
		
		<script>
		$(function(){
			$(window).scroll(function(){
				var _top = $(window).scrollTop();
				if(_top>300){
					$('.lanrenzhijia_top').fadeIn(600);
				}else{
					$('.lanrenzhijia_top').fadeOut(600);
				}
			});
			$(".lanrenzhijia_top").click(function(){
				$("html,body").animate({scrollTop:0},500);
			});
		});
		</script>

-------------------------------------------------------------------------------------------------------------------分割线-------------------------------------------------------------------------------------------------------------------

第二种就是看你个人需要如果需要仅限于shopify某些网站使用这个标签的话那就直接在某个单个页面放入这个代码段

另外的话就是针对于产品页面或者文章页面的话就去在线商店里面找到部分覆盖文件然后直接投放代码段就好了