顶部右侧 | 自行修改 西安网站推广
当前位置:网站首页 > SEO技术 > 正文

WordPress 技巧:双击空白部分返回顶部

seo秀 2019-05-25 48 浏览 0 评论

因为现在使用的iArtWork主题有一个双击网页空白部分返回顶部的功能,所以已经习惯在看完文章之后双击一下博客的空白部分,于是乎我就养成了在任何博客都双击空白部分的习惯。,实际上实现“WordPres主题双击空白部分返回顶部”的方法很是简单,,只需要把下面JS代码加到主题的头部模版中:,

因为现在使用的iArtWork主题有一个双击网页空白部分返回顶部的功能,所以已经习惯在看完文章之后双击一下博客的空白部分,于是乎我就养成了在任何博客都双击空白部分的习惯。

实际上实现“WordPres主题双击空白部分返回顶部”的方法很是简单,

只需要把下面JS代码加到主题的头部模版中:

<script type="text/javascript">
$(function(){
    var scrollTo = function(top, duration, callback) {
        var w = $(window);
        var FPS = 50;
        var currentTop = w.scrollTop();
        var offset = (currentTop - top) / (duration * FPS / 1000);
        var n = 0;
        var prevTop = currentTop;
        var t = setInterval(function() {
            if ((prevTop - top) * (currentTop - top) <= 0) {
                clearInterval(t);
                currentTop = prevTop = top;
                w.scrollTop(top);
                if (callback) callback();
            } else {
                prevTop = currentTop;
                w.scrollTop(currentTop -= offset);
            }
        }, 1000 / FPS);
    }
    $('body').dblclick(function(){
        scrollTo(0, 200, function(){
        });
        $(".textField,#commentForm textarea").focus();
    });
    $('#container.#footer').dblclick(function(e){e.stopPropagation();});
});
</script>

OK,修改完的主题即可通过双击主题的空白部分(边缘四周什么的)实现返回顶部效果(这个是我博客的效果,属于快速分会),具体效果可以在这里博客进行预览!

下面更新一个缓慢返回顶部的方法:

<script type="text/javascript">// < ![CDATA[
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
window.scrollBy(0,1);
}
document.onmousedown=sc
document.ondblclick=initialize
// ]]></script>

使用方法和上面的一样,直接放到header.php文件的 </head>之前就可以了。

OK,教程到这里就写完了,如果你有什么不懂的地方,欢迎在下方留言,我会为你解答的。

PS:本文中说到的网站空白部分,指的是背景处,即为周良博客的黑色背景处双击即可返回顶部!

相关推荐

让客户对你网站产生兴趣的办法!
让客户对你网站产生兴趣的办法!

大家好,欢迎来到西安蓝蜻蜓网络科技讲坛,今天我们讲述的是跟我们企业息息相关的话题,也是我们很多企业目前最头疼的问题,就是如何让客户对我们的企业或者个人网站产生兴...

2周前 (10-17) 小杨seo

中小型企业在网络营销上需要注意的问题
中小型企业在网络营销上需要注意的问题

众所周知,随着现在互联网的发展和进步,越来越多的企业包括个人都加入了互联网这个庞大的信息体系中,我们通过互联网也了解很多企业的成长及产品信息,从而完成产品上的交...

2周前 (10-17) 小杨seo

西安网络推广和线下推广的区别
西安网络推广和线下推广的区别

大家好,欢迎来到西安蓝蜻蜓网络讲坛,今天我们所讲的是,有关于我们企业线上和线下推广的共同点和不同点这方面的话题。随着互联网的进步,越来越多的企业入驻了互联网,同...

2周前 (10-17) 小杨seo

seo诊断费用有哪些方面?
seo诊断费用有哪些方面?

大家好,欢迎来到西安蓝蜻蜓网络讲坛,今天我们所讲述的是SEO诊断,什么是SEO诊断?SEO诊断是从哪几个方面诊断的?SEO诊断需要多少费用?一、什么是SEO诊断...

2周前 (10-17) 小杨seo

企业官网首页优化seo技术 优化知识有哪些!
企业官网首页优化seo技术 优化知识有哪些!

seo是搜索引擎优化的意思,那么大家seo技术有哪些吗?优化知识有哪些呢?新型黑帽技术包括有哪些呢?下面宝丞网给大家介绍一下关于seo技术的相关内容,有需要的朋...

2周前 (10-17) seo秀

SEO技术,快速让你变成seo高手,干货需要收藏
SEO技术,快速让你变成seo高手,干货需要收藏

前言:本篇培训直击SEO精髓,为什么只打算用一节课讲SEO?因为SEO本身没有那么高深的东西。互联网知识泛滥成灾的原因主要是培训机构惹的祸。为什么学SEO?排名...

2周前 (10-17) seo秀

SEO技术大全:SEO技术之经典30个白帽技术
SEO技术大全:SEO技术之经典30个白帽技术

SEO技术之经典30个白帽技术SEO技术之经典30个白帽技术,对于网络推广的人来说,如何让搜索引擎搜索到你的网站及让你的网站能在主流的搜索引擎上有良好的排名一直...

2周前 (10-17) seo秀

网站优化SEO技术
网站优化SEO技术

大家日日都在用网站优化,SEO技术,日日不停的在做网站内容更新,外链制作等等,但是网站优化真的就仅仅是如此吗?为的是网站排名?网站流量还是网上营销额?也想问问我...

2周前 (10-17) seo秀

什么是SEO高级技术?SEO教程教你如何运用
什么是SEO高级技术?SEO教程教你如何运用

今天SEO教程要介绍的是SEO站内优化的五大核心。主要包括:网站标题的写法,原创文章以及如何写原创文章,网站更新设置,网站全站链接,四处一词等相关内容。  第一...

2周前 (10-17) seo秀

SEO是什么?SEO技术都包含哪些方面?

SEO是什么?百度百科上的解释如下:图一:什么是SEO简单的来说,就是通过优化手段来提升网站的排名。我们来举个例子说明一下,例如在百度搜索框中搜索SEO,如下图所示。图二:SEO的搜素结果我们看到,百...

取消回复欢迎 发表评论: