分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress文章内锚点链接平滑滚动
+

WordPress文章内锚点链接平滑滚动

WordPress文章内锚点链接平滑滚动-BanYuner

今天以为群友寻求一个帮助,说需要一个锚点平滑滚动的链接,我当时也想起来了。我以前添加文章目录的时候也有想要这个功能,于是我又开始了搜索之路。

通过搜索,我很快就在知更鸟博客找到了相关文章,通过测试,确实是有效果的,于是乎,我马上就利用起来了,真的是很不错的说,没有那么生硬的感觉了。那么这类不费话了,直接附上了相关代码

$(function(){
    $('a[href*=#],area[href*=#]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                    scrollTop: targetOffset
                },
                1000);
                return false;
            }
        }
    });
})

代码部分直接添加到自己站点的主要JS中即可,至于怎么找主要的JS,那么只能自行百度了。一般来说,每个页面都会加载的那个JS,那么就是主要的JS了。

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
WordPress文章内锚点链接平滑滚动
支付宝(点击图片切换)
扫码,支持我
WordPress文章内锚点链接平滑滚动
微信(点击图片切换)
扫码,手机看
WordPress文章内锚点链接平滑滚动
匿名

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

相关推荐

  • WordPress简易集成Markdown教程

    WordPress简易集成Markdown教程

    今天首先在群里面看到一个用户询问是否有方法将Markdown集成到主题里面去,后来我一想,这个所谓的Markdown确实是很多人提到 ...

    点击查看
  • WordPress制作简易年度总结页面

    WordPress制作简易年度总结页面

    今天早些时候已经制作一个类似112博客导航的页面,具体可以详见:

    点击查看
  • WordPress通过短代码显示指定文章内容

    WordPress通过短代码显示指定文章内容

    今天在一个WordPress交流群里面看到一个群友问一个问题,我个人方面也是很感兴趣,这个问题就是如何通过“新建文章栏输入链接 ...

    点击查看
  • 禁用WordPress 4.7版本的PDF预览功能

    禁用WordPress 4.7版本的PDF预览功能

    之前的文章我们也介绍了,关于WordPress 4.7版本中,新增了一个预览PDF的功能,详见:

    点击查看
  • WordPress获取文章的第一张图片并且显示

    WordPress获取文章的第一张图片并且显示

    关于这类的文章我们已经介绍过两种方法了,两种方法都不一样,但是适合自己的才是最好的,虽然今天我要介绍的方法可能不适合 ...

    点击查看
  • WordPress 评论中嵌入图片

    WordPress 评论中嵌入图片

    今天在知更鸟博客看到了这篇文章,虽然文章本身的原理很简单,但是通过这个原理我相信可以了解到信息或者说可以达到举一反三 ...

    点击查看
WordPress文章内锚点链接平滑滚动
7 + 9 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)