JQuery锚点链接平滑滚动效果

知更鸟
1480
文章
6919
评论
2014年10月25日10:30:29 评论 1.9K 602字阅读2分0秒

页面平滑滚动锚点代码

  1. $(function(){
  2.     $('a[href*=#],area[href*=#]').click(function() {
  3.         if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
  4.             var $target = $(this.hash);
  5.             $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
  6.             if ($target.length) {
  7.                 var targetOffset = $target.offset().top;
  8.                 $('html,body').animate({
  9.                     scrollTop: targetOffset
  10.                 },
  11.                 1000);
  12.                 return false;
  13.             }
  14.         }
  15.     });
  16. })
weinxin
关于本站
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
最佳 CSS 框架 Web前端

最佳 CSS 框架

在构建网站时,使用 CSS 框架是一个实时的节省,因为它为您提供了每个网页设计师和前端开发人员在制作网站时需要的工具。 CSS 框架是一个软件框架,它允许使用 HTML/CSS 进行更简单、更符合标准...
jQuery幻灯片插件:OWL Carousel Web前端

jQuery幻灯片插件:OWL Carousel

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有以下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式...
js实时获取浏览器窗口大小 Web前端

js实时获取浏览器窗口大小

js实时获取浏览器窗口大小,我们可以使用addEventListener()方法来实现。该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件,例如window...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: