Jquery网页内锚点跳转滑动缓冲导航的方法代码

<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.anchorGoWhere = function(options){
  var obj = jQuery(this);
  var defaults = {target:0, timer:500};
  var o = jQuery.extend(defaults,options);
  obj.each(function(i){
   jQuery(obj[i]).click(function(){
    var _rel = jQuery(this).attr("href").substr(1);
    switch(o.target){
     case 1:
      var _targetTop = jQuery("#"+_rel).offset().top;
      jQuery("html,body").animate({scrollTop:_targetTop},o.timer);
      break;
     case 2:
      var _targetLeft = jQuery("#"+_rel).offset().left;
      jQuery("html,body").animate({scrollLeft:_targetLeft},o.timer);
      break;
    }
   return false;
   });
  });
 };

$("#mybtn").anchorGoWhere({target:1}); //这里是点击按钮的ID
</script>
时间: 2024-07-30 05:07:32

Jquery网页内锚点跳转滑动缓冲导航的方法代码的相关文章

导航固定时页面内锚点跳转问题

写在前面: 记录对一个小问题的不算解决的方法,大家如果有更好的方法,欢迎交流,谢谢 Demo百度云链接:http://pan.baidu.com/s/1qW9NLlM 问题说明:上面导航栏固定,页面内实现锚点平滑跳转,跳转时如何使页面处于导航栏之下? 解决方式:通过一个div,给div导航的高度,每次跳至div处 问题图片: 希望蓝色位于导航下方: 解决后的问题图片: 补加一个div,定位到红色处 页面平滑跳转代码javascript <script> $('.learnmore').clic

锚点跳转滑动效果

$('a[href*="#"],area[href*="#"]').click(function() { console.log(1); if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $t

jQuery实现页面内锚点平滑跳转

平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”. 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/37.htm HTML文件代码: <!DOCTYPE html> <html> <head> <meta charset=

jQuery写出可调控自定义的平滑滚动效果(锚点跳转动画)

今天朋友,没错,是上次的好基友,在用jQuery.scrollTo.js这个插件的时候总是没反应,而且在函数里console可以输出数据,这点现在仍让我很困惑,难道是scroll版本和我引用的jQUery版本不兼容?我在自己本地搭建了一个小demo也没反应,于是就借助动画写了一个可以自定义滑动的距离和速度调控的demo.供大家参考,欢迎交流更好的办法. 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 &

页面内锚点定位及跳转方法总结

点击锚点跳转到相应DIV的问题. 第一种方法即最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head> <style> div { height: 800px; width: 400px; border: 2px solid black; } h2 { position: fixed; margin:50px 500px; } </style></head&

jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典

1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性:还有一种就是使用标签的id属性.百度百科就是使用a标签的name属性来实现锚点跳转的. 比如: <a href="#2">波轮洗衣机介绍</a> <a name="2"></a> 但是上种方法使用了一个空标签,而且

jQuery锚点跳转及相关操作

1.锚点跳转简介 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性:还有一种就是使用标签的id属性.百度百科就是使用a标签的name属性来实现锚点跳转的. 比如: <a href=”#2”>波轮洗衣机介绍</a> <a name=”2”></a> 但是上种方法使用了一个空标签,而且有时候会出现锚点失效.所以建议采用id来绑定锚点,

6款强大的 jQuery 网页布局创建及优化插件

本文将为您介绍6款功能强大的jQuery插件,它们能够帮助您方便快捷地创建复杂的网络布局并进行优化. 1.UI.Layout 该插件可以创建任何你想要的UI形式:包括从简单的标题或侧边栏,到一个包含工具栏,菜单,帮助面板,状态栏,子表格等复杂的应用.     2.jQUery Masonry 动态布局jQuery插件,折叠式CSS浮动面板. 3.jLayout 可提供四种网页元素布局算法.     4.jQuery pageSlide 该插件灵感来自于Aza Raskin的UI工作中.他最近发表

各种HTML锚点跳转方式

1 js控制锚点跳转 <a name="anchor"></a> location.hash="anchor"; 不只有a其他元素也可以,比如在报表中:<tr id="tr1">...</tr>location.hash="tr1"或者用jQuery的动画滚动效果:var id="tr1";$('html,body').animate({scrollTop: