最新公告
  • 欢迎您光临源库坊,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 给WordPress博客添加返回顶部/底部的教程

    今天给大家分享下路途吧返回顶部那块的制作教程,其实也不难,主要是用到html、css和一些jq代码。

    效果图如下图所示:

    1614864582-4cfc4e9397879b5

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

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

    <div class=\"gotop\">
    	<a id=\"top\"><i class=\"iconfont icon-arrow-up\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">><span%20class="token tag"><span%20class="token punctuation"></a<span%20class="token punctuation">>
    	<a href=\"<span%20class="token php language-php"><span%20class="token delimiter important"><?php <span%20class="token keyword keyword-echo">echo <span%20class="token variable">$gotop<span%20class="token punctuation">[\'qq_url\'<span%20class="token punctuation">]<span%20class="token delimiter important">?>\" rel=\"external nofollow\"  rel=\'nofollow\' class=\"uk-display-block b-b\"><i class=\"iconfont icon-qq\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">><span%20class="token tag"><span%20class="token punctuation"></a<span%20class="token punctuation">>
    	<a class=\"wechat\"><i class=\"iconfont icon-wechat\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">><span%20class="token tag"><span%20class="token punctuation"></a<span%20class="token punctuation">>
    	<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\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">><span%20class="token tag"><span%20class="token punctuation"></a<span%20class="token punctuation">>
    	<a id=\"footer\"><i class=\"iconfont icon-arrow-down\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">><span%20class="token tag"><span%20class="token punctuation"></a<span%20class="token punctuation">>
    <span%20class="token tag"><span%20class="token punctuation"></div<span%20class="token punctuation">>
    <div class=\"gotop-pop\">
    	<div class=\"gotop-pop-main\">
    		<div class=\"gotop-pop-box uk-overflow-hidden\">
    			<span%20class="token tag"><span%20class="token punctuation"><h3<span%20class="token punctuation">>微信<span%20class="token tag"><span%20class="token punctuation"></h3<span%20class="token punctuation">>
    			<i class=\"iconfont icon-icon-test25 gotop-pop-box-close\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">>
    			<img src=\"https://www.zhankr.net/wp-content/uploads/2020/02/2020020408254925.jpg\" />
    		<span%20class="token tag"><span%20class="token punctuation"></div<span%20class="token punctuation">>
    	<span%20class="token tag"><span%20class="token punctuation"></div<span%20class="token punctuation">>
    <span%20class="token tag"><span%20class="token punctuation"></div<span%20class="token punctuation">>
    

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

    <span%20class="token operator"><link rel<span%20class="token operator">=\"stylesheet\" href<span%20class="token operator">=\"https<span%20class="token punctuation">:<span%20class="token comment">//at.alicdn.com/t/font_1557485_rig7wtgjqd.css\" rel=\"external nofollow\"  />
    

    Icon图标

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

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

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

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

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

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

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

    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"www.yuankufang.com",如遇到无法解压的请联系管理员!
    源库坊 » 给WordPress博客添加返回顶部/底部的教程

    常见问题FAQ

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

    发表评论

    • 134会员总数(位)
    • 767资源总数(个)
    • 4本周发布(个)
    • 0 今日发布(个)
    • 614稳定运行(天)

    提供最优质的资源集合

    赞助本站svip 了解详情