wordpress侧边jQuery返回顶部代码

文章目录[隐藏]

引入文件
布局结构
静态图片文件的修改与位置

wordpress中实现返回顶部的效果，我们可以使用插件wp-auto-top,为了展现更多的个性，实现更多的功能，我们可以借助jQuery插件自己来定制返回顶部的效果，你可以看看本站的效果，下面我们一起来看看实现的步骤。

引入文件

要实现返回顶部的特效，我们要引入zzsc.css,popwin.js,jQuery.js.点击下面的链接下载所以文件。

百度网盘下载
1、css引入方法
把以下css代码直接复制到你的主题的style.css文件的最后，这样你就不需要单独再引入zzsc.css文件了。

```
/*
```
```
*goto top css begin
```
```
*/
```
```
ul,ol {
```
```
	list-style:none
```
```
}
```
```
a {
```
```
	text-decoration:none
```
```
}
```
```
a:hover {
```
```
	text-decoration:underline
```
```
}
```
```
 
```

#moquu_top,#moquu_wxin,#moquu_wshare,#moquu_wmaps {

```
	z-index:999;
```
```
	width:50px;
```
```
	height:50px;
```
```
	right:10px;
```
```
	position:fixed;
```
```
	cursor:pointer;
```
```
	_position:absolute;
```
```
	_bottom:auto;
```

	_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))

```
}
```
```
 
```
```
#moquu_wxin {
```
```
	top:660px;
```
```
	_margin-top:660px
```
```
}
```
```
#moquu_wxin a {
```

	background:url(../images/sbtn.png) 0 -0px;

```
	right:0;
```
```
	float:left;
```
```
	width:50px;
```
```
	height:50px;
```
```
	text-indent:-9999px
```
```
}
```
```
#moquu_wxin a:hover {
```

	background:url(../images/sbtn.png) -50px -0px

```
}
```
```
#moquu_wshare {
```
```
	top:712px;
```
```
	_margin-top:712px
```
```
}
```
```
#moquu_wshare a {
```

	background:url(../images/sbtn.png) 0 -50px;

```
	width:50px;
```
```
	height:50px;
```
```
	right:0;
```
```
	float:left;
```
```
	text-indent:-9999px
```
```
}
```
```
#moquu_wshare a:hover {
```

	background:url(../images/sbtn.png) -50px -50px

```
}
```
```
#moquu_wmaps {
```
```
	top:764px;
```
```
	_margin-top:764px
```
```
}
```
```
#moquu_wmaps a {
```

	background:url(../images/sbtn.png) 0 -150px;

```
	width:50px;
```
```
	height:50px;
```
```
	right:0;
```
```
	float:left;
```
```
	text-indent:-9999px
```
```
}
```
```
#moquu_wmaps a:hover {
```

	background:url(../images/sbtn.png) -50px -150px

```
}
```
```
#moquu_top {
```
```
	top:816px;
```
```
	_margin-top:816px;
```

	background:url(../images/sbtn.png) 0 -101px;

```
	width:50px;
```
```
	height:50px
```
```
}
```
```
#moquu_top:hover {
```

	background:url(../images/sbtn.png) -50px -101px

```
}
```
```
.moquu_wxin,.moquu_wshare {
```
```
	position:relative;
```
```
	z-index:2
```
```
}
```

.moquu_wxin a:hover .moquu_wxinh,.moquu_wshare a:hover .moquu_wshareh {

```
	display:block
```
```
}
```
```
.moquu_wxin .moquu_wxinh {
```
```
	position:absolute;
```
```
	display:none;
```
```
	left:-280px;
```
```
	top:-200px;
```
```
	width:275px;
```
```
	height:355px;
```

	background:url(../images/moquu_ico.png) -1px -482px no-repeat

```
}
```
```
.moquu_wshare .moquu_wshareh {
```
```
	position:absolute;
```
```
	display:none;
```
```
	left:-280px;
```
```
	top:-200px;
```
```
	width:275px;
```
```
	height:360px;
```

	background:url(../images/moquu_wshare.png) no-repeat

```
}
```

2、popwin.js核心文件的引入
打开你主题文件footer.php找到最下面,在此上面复制如下代码：

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/popwin.js"></script>

```
<script>
```
```
$(document).ready(function() {
```
```
	$("a.moquu_wmaps").on('click',
```
```
	function() {
```

		popWin.showWin("800", "475", "511遇见", "http://www.511yj.com");

```
	});
```
```
});
```
```
</script>
```

3、jQuery.js引入
特效引入的jQuery版本是1.83，而我们的wordpress引用的jQuery文件版本是jQuery v1.11.3 所以需要再次引入新的jQuery,否则没有特效，但这样会造成jQuery文件冲突，你可以尝试一下，下面给出一个解决方案，未必是最好的。
找到你主题的header.php文件，在前复制以下代码：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>

```
<script type="text/javascript">
```
```
	$(window).load(function() {
```
```
		$('#featured').orbit();
```
```
	});
```
```
</script>
```

布局结构

在你的主题文件footer.php底部加入以下代码：

<div id="moquu_wxin" class="moquu_wxin"><a href="javascript:void(0)">511遇见<div class="moquu_wxinh"></div></a></div>

<div id="moquu_wshare" class="moquu_wshare"><a href="javascript:void(0)">511遇见<div class="moquu_wshareh"></div></a></div>

<div id="moquu_wmaps"><a href="javascript:void(0)" class='moquu_wmaps'>511遇见</a></div>

<a id="moquu_top" href="javascript:void(0)"></a>

```

```

静态图片文件的修改与位置

进入images文件夹把里面的微信换成你的图片，记得miages文件夹的位置是和你放js文件夹的位置一起的，必须注意路径问题。以上文件来自互联网，作者只是整理了一下用法而已。

511遇见

不一样的遇见

wordpress侧边jQuery返回顶部代码

引入文件

布局结构

静态图片文件的修改与位置

您可能感兴趣的文章:

相关文章: