最新公告
  • 欢迎您光临陌佑网,提供代搭建与我们一样的资源站,系统搭建出售开通SVIP
  • 今天给大家分享下陌佑网返回顶部那块的制作教程,其实也不难,主要是用到html、css和一些jq代码。

    效果图如下图所示:

    给WordPress博客添加返回顶部/底部的教程

    废话不多说,我们开始教程:

    首先我们把下面的html代码添加到主题footer.php文件的</body>上面:

    <div class=\"gotop\">
    	<a id=\"top\"><i class=\"iconfont icon-arrow-up\"></i></a>
    	<a href=\"<?php echo $gotop[\'qq_url\']?>\" rel=\"external nofollow\"  rel=\'nofollow\' class=\"uk-display-block b-b\"><i class=\"iconfont icon-qq\"></i></a>
    	<a class=\"wechat\"><i class=\"iconfont icon-wechat\"></i></a>
    	<a href=\"https://www.baidu.com/baidu?word=wptoo%E6%95%99%E7%A8%8B%E7%BD%91\" rel=\"external nofollow\"   rel=\'nofollow\'><i class=\"iconfont icon-resonserate-fill\"></i></a>
    	<a id=\"footer\"><i class=\"iconfont icon-arrow-down\"></i></a>
    </div>
    <div class=\"gotop-pop\">
    	<div class=\"gotop-pop-main\">
    		<div class=\"gotop-pop-box uk-overflow-hidden\">
    			<h3>微信</h3>
    			<i class=\"iconfont icon-icon-test25 gotop-pop-box-close\"></i>
    			<img src=\"https://www.moyouwang.net/wp-content/uploads/2020/02/2020020408254925.jpg\" />
    		</div>
    	</div>
    </div>
    

    可以看到在右侧按钮上面是有Icon图标的,所以我们还需要加载一个Icon图标,把下面的一行代码添加到header.php的</head>标签上面,加载Icon样式。

    <link rel=\"stylesheet\" href=\"https://at.alicdn.com/t/font_1557485_rig7wtgjqd.css\" rel=\"external nofollow\"  />
    

    Icon图标

    如果你的博客有Icon图标样式,可以不用添加上面的代码,用自己的图标

    然后我们添加js代码,将下面代码添加到footer.php文件的</body>上面:

    <script>
    	$(window).scroll(function() {
    		var scroll_top = $(window).scrollTop();
    		if(scroll_top >= 200) {
    			$(\".gotop\").fadeIn();
    		} else {
    			$(\".gotop\").fadeOut();
    		}
    	});
    	$(\"#top\").click(function() {
    		$(\"html,body\").finish().animate({
    			\"scrollTop\": $(\".top\").offset().top
    		}, 500);
    	});
    	$(\"#footer\").click(function() {
    		$(\"html,body\").finish().animate({
    			\"scrollTop\": $(\".bottom\").offset().top
    		}, 500);
    	});
    	$(\'.wechat\').click(function() {
    		$(\'.gotop-pop\').toggle();
    	});
    	$(\'.gotop-pop-box-close\').click(function() {
    		$(\'.gotop-pop\').hide()
    	});
    </script>
    

    以上代码依赖jquery,请确保你的博客已经加载jquery文件。

    最后就是css样式了, 将下面代码添加到header.php文件的</head>上面,也可以添加到主题的样式文件内,一般是style.css这个文件。(为了方便二次修改,css样式代码没有压缩,代码比较长,可以直接点击复制)

    /*
    * ------------------------------------------------------------------------------
    * 返回顶部样式
    * ------------------------------------------------------------------------------
    */
    
    .gotop {
    	position: fixed;
    	bottom: 0;
    	right: 0;
    	margin: 30px;
    	display: none;
    	overflow: hidden;
    	border-radius: 4px;
    	border: 1px solid #eee;
    }
    
    .gotop a {
    	display: block;
    	padding: 10px 13px;
    	background-color: #fff;
    	transition: all .3s ease;
    	color: #888;
    	background: #fff;
    	border-bottom: 1px solid #eee;
    	text-decoration: none;
    	cursor: pointer;
    }
    
    .gotop a:hover {
    	color: #fff;
    	background: #2c63ff;
    	box-shadow: -3px 2px 10px -2px #2c63ff;
    	transform: translateY(-3px);
    	border: 0
    }
    
    .gotop a:last-child {
    	border: 0
    }
    
    .gotop i {
    	font-size: 18px
    }
    
    .gotop-pop {
    	position: fixed;
    	width: 100%;
    	height: 100%;
    	background: #00000030;
    	display: none;
    	top: 0;
    	transition: all .3s;
    }
    
    .gotop-pop-main {
    	position: relative;
    	max-width: 600px;
    	margin: 10% auto;
    	padding: 15px;
    	animation: fadeinB .6s infinite;
    	-moz-animation: fadeinB .6s infinite;
    	/* Firefox */
    	-webkit-animation: fadeinB .6s infinite;
    	/* Safari and Chrome */
    	-o-animation: fadeinB 1s infinite;
    	/* Opera */
    	animation-iteration-count: 1;
    	-webkit-animation-iteration-count: 1;
    	/* Safari 和 Chrome */
    }
    
    .gotop-pop-box {
    	background: #fff;
    	padding: 20px;
    	text-align: center;
    }
    
    .gotop-pop-box h3 {
    	text-align: center;
    }
    .gotop-pop-box-close {
    	position: absolute;
    	right: 0;
    	top: 0;
    	font-size: 24px;
    	color: #aaa;
    }
    @keyframes fadeinB {
    	0% {
    		transform: translateY(20px);
    		opacity: 0;
    		filter: Alpha(opacity=0);
    	}
    	100% {
    		transform: translateY(0px);
    		opacity: 1;
    		filter: Alpha(opacity=1);
    	}
    }
    
    .fadeinB {
    	animation: fadeinB .6s infinite;
    	-moz-animation: fadeinB .6s infinite;
    	/* Firefox */
    	-webkit-animation: fadeinB .6s infinite;
    	/* Safari and Chrome */
    	-o-animation: fadeinB 1s infinite;
    	/* Opera */
    	animation-iteration-count: 1;
    	-webkit-animation-iteration-count: 1;
    	/* Safari 和 Chrome */
    }
    

    教程到此就结束了,完成以上步骤后,去网站前端看看效果吧,如果有疑问可以加入我们的WordPress交流群。

    WordPress建站交流群:8424781
    

     

    文章来自陌佑网1w7.why888.top转载请注明出处,并保留本链接,谢谢!


    陌佑网 » 给WordPress博客添加返回顶部/底部的教程

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 142会员总数(位)
    • 16688资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 1457稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情