给 WordPress 主题添加回到顶部功能

林继 WordPress 47 共写了114个字 (2019-04-24 6:54:25) 没有评论 打印 扫描二维码 百度未收录

首先把这段代码添加到网站的 JavaScript 文件或者直接添加到 footer.php 文件中。

  1.     <script type="text/javascript" charset="utf-8">   
    
  2. jQuery(document).ready(function($){
    
  3. 	if ($(window).scrollTop() != "0")
    
  4. 		$(".scroll-to-top").fadeIn(1200) //如果距离顶部的距离不为20,显示.scroll-to-top
    
  5. 	var scrollDiv = $(".scroll-to-top");
    
  6. 	$(window).scroll(function()
    
  7. 	{
    
  8. 		if ($(window).scrollTop() == "0")
    
  9. 			$(scrollDiv).fadeOut(350)//如果距离顶部的距离为20,隐藏scrollDiv
    
  10. 		else
    
  11. 			$(scrollDiv).fadeIn(1200)//其他情况下,显示scrollDiv
    
  12. 	});
    
  13. 	$(".scroll-to-top").click(function(){
    
  14. 		$("html, body").animate({
    
  15. 			scrollTop: 0 //点击按钮,滚动回到顶部
    
  16. 		}, 600)
    
  17. 	})
    
  18.  
  19. });  
    
  20. </script>
    
  21. <div class="scroll-to-top" style="display: none;"><i class="fa fa-chevron-up"></i></div>
    
  22. </body>

然后是 CSS 代码

  1. <style type="text/css">
    
  2. /* 回顶部 */
    
  3. .scroll-to-top {
    
  4.   display: none;
    
  5.   width: 30px;
    
  6.   height: 30px;
    
  7.   line-height: 32px;
    
  8.   color: #fff;
    
  9.   text-align: center;
    
  10.   background-color: #333;
    
  11.   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    
  12.   cursor: pointer;
    
  13.   bottom: 5%;
    
  14.   position: fixed;
    
  15.   right: 0px;
    
  16.   z-index: 999;
    
  17. }
    
  18. .scroll-to-top:hover {
    
  19.   opacity: .8;
    
  20. }
    
  21. </style>

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >