外贸营销
wordpress博客添加返回顶部小火箭
begin主题这侧边好多功能是鸡肋,返回顶部、到达底部,简体繁体转换等,我用的最多的就是返回顶部,所以索性就把这个主题的侧边功能栏全部去掉,自己加下返回顶部的小火箭图片,美观又好用。
你可以打开这两个链接下载这两个小火箭素材,静态小火箭,动态小火箭.
一、返回顶部代码
我用的是jquery,因为我的博客加载了jquery,不用白不用,其实用原生js也很方便,具体的代码如下:
// HTML代码<ul id="scroll"> <img class="go-top" src="nopic" alt="返回顶部"></ul>// CSS代码#scroll { width: 32px; float: right; position: fixed; right: 100px; bottom: 50px; z-index: 9999;}#scroll img{ transform: scale(0.5); cursor: pointer;}// JS代码$(window).scroll(function() { if($(window).scrollTop() >= 100){ $('.go-top').fadeIn(300); }else{ $('.go-top').fadeOut(300); }});$('.go-top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});$('.go-top').mouseover(function() { $('.go-top').attr('src', 'http://www.zcbboke.com/wp-content/themes/begin5.2/img/scroll2.gif');})$('.go-top').mouseout(function() { $('.go-top').attr('src', 'nopic');})
加载图片我使用的是绝对路径,如果你不想下载这两张图片素材,也可以直接引用我网站的。
二、begin主题加入返回顶部代码
下面我以begin主题为例,教下如何放在自己的wordpress博客中。
- begin侧边滚动栏是在主题目录下template\scroll.php中(复制上面HTML代码)
- 在主题目录下的style.css中搜索#scroll就可以找到对应的样式(复制CSS代码)
- begin原滚动栏的js在js\script.js中,一样搜索就可以找到,删除原来的(复制上面的jquery代码)
标签