js跳转到锚点
发布时间：2015-10-14, 16:53:40 分类：HTML | 编辑 off 网址 | 辅助
正文 845字数 308,248阅读
$(function(){
$(".nav_pro").click(function(){
$.scrollTo('#pro',500);
});
$(".nav_news").click(function(){
$.scrollTo('#news',800);
});
$(".nav_ser").click(function(){
$.scrollTo('#ser',1000);
});
$(".nav_con").click(function(){
$.scrollTo('#con',1200);
});
$(".nav_job").click(function(){
$.scrollTo('#job',1500);
});
});
Run code
Cut to clipboard
不只有a其他元素也可以，比如在报表中：
<tr id="tr1">...</tr>
location.hash="tr1"
或者用jQuery的动画滚动效果：
var id="tr1";
$('html,body').animate({scrollTop: $("tr#"+id).offset().top}, 500);
不知道是不是兼容性问题"location.hash="tr1""这种写法好像只能点击一次,第二次点击就没有用了,jquery的方式倒是没有这个问题,
可以先置空再赋值： location.hash=""; location.hash="tr1";
Run code
Cut to clipboard
（支付宝）给作者钱财以资鼓励 （微信）→
有过 1 条评论 »
对于锚点的平滑跳转，在一般的商业性质的网站上，权衡来说，要谨慎使用。
例如：让页面平滑滚动到一个id为box的元素处，则JQuery代码只要一句话，如下：
$(“html,body”).animate({scrollTop:$(“#box”).offset().top},1000)其中animate为JQuery的自定义动画方法，$(“#box”).offset().top表示id为box的JQuery对象距离页面顶部的偏移值，1000表示平滑动画执行的时间为1000毫秒，也就是1秒。
4.IE下锚点刷新失效及JQuery下的解决
【1】关于锚点刷新失效
锚点刷新失效就是指当按下刷新键F5时，即使此时URL的后面就随锚点，此锚点也是不起作用的。
【2】在JQuery中，不难实现。可以根据URL获取锚点，从而进一步获得对应锚点对象，然后再让页面的滚动高度为其距离页面顶部的偏移值就可以了。使得页面无论是重新载入还是其刷新，其后面的锚点都起作用。
其js代码如下：
$(function(){ var url = window.location.toString(); var id = url.split(“#”)[1]; if(id){ var t = $(“#”+id).offset().top; $(window).scrollTop(t); } });jQuery获得子元素个数的方法
//获取id=div1下的子元素的个数 $('#div1').children().length; //获取id=div1下的span元素个数 $('#div1').children('span').length;