jQuery:在调用URL时滚动到锚点,替换浏览器行为

我已经知道了jQuery插件ScrollTo,但到目前为止我还没有找到任何方法来实现以下内容:

用户访问我的网站(通过键入,而不是通过单击我页面上的链接)domain.com/bla.php#foo

并且锚“#foo”存在。 现在我希望用户的浏览器不会自动滚动到“#foo”,而是我想要平滑滚动,以便元素’#foo’位于视图的中间而不是在绝对的顶部位置用户查看。

谢谢到目前为止!

如果你没有创建实际的锚foo ,而是使用像_foo这样的id创建你的锚(类似于 )。 您可以处理$(document).ready来实现此目的。

像(伪代码)的东西

 $(document).ready(function() { var elem = $('#_' + window.location.hash.replace('#', '')); if(elem) { $.scrollTo(elem.left, elem.top); } }); 

我对Jan Jongboom的脚本做了一些改进,所以它现在看起来像这样:

 $(document).ready(function () { // replace # with #_ in all links containing # $('a[href*=#]').each(function () { $(this).attr('href', $(this).attr('href').replace('#', '#_')); }); // scrollTo if #_ found hashname = window.location.hash.replace('#_', ''); // find element to scroll to ( or anything with particular id) elem = $('a[name="' + hashname + '"],#' + hashname); if(elem) { $(document).scrollTo(elem, 800); } }); 

它会更改链接中的所有锚点,因此对于没有javascript的用户,行为将保持不变。

Machineghost的回答非常有帮助。 我拼凑在一起的代码采用了一个URL参数,并将其转换为一个哈希标记,然后浏览器在DOM准备好后立即滚动到该标记。

URL将如下所示:

 www.mysite.com/hello/world.htm?page=contact 

联系人是您要滚动到的ID的名称

 

Contact Us

这是代码:

 // Get any params from the URL $.extend({ getUrlVars: function(){ var vars = [], hash; var url = decodeURIComponent(window.location.href); var hashes = url.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }, getUrlVar: function(name){ return $.getUrlVars()[name]; } }); $(document).ready(function() { // Unhide the main content area $('section.centered').fadeIn('slow'); // Create a var out of the URL param that we can scroll to var page = $.getUrlVar('page'); var scrollElement = '#' + page; // Scroll down to the newly specified anchor point var destination = $(scrollElement).offset().top; $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-75}, 800 ); return false; }); 

我在Chrome和FF中检查过它,效果非常好。 如果滚动目标没有到达您想要的确切位置,请尝试调整“destination-75”。

我无法用上面的post完成它,谢谢!

 /* scrolling to element */ var headerHeight = $('#header').height() + $('#header-bottom-cap').height() + 10; //When the header position is fixed $('a').click(function(){ var hashEle = $(this).attr('href').split('#'); if (hashEle.length > 1) { if (hashEle[1] == 'top') { $('body, html').animate({ scrollTop: 0 },500); } else { jQuery('body, html').animate({ scrollTop: $('#'+ hashEle[1]).offset().top - headerHeight },500); } }; }) // find element from url hashname = window.location.hash.replace('#', ''); elem = $('#' + hashname); if(hashname.length > 1) { if(hashname == 'top') { $('body, html').animate({ scrollTop: 0 },200); } else { $('body, html').animate({ scrollTop: $(elem).offset().top - headerHeight },500); } }; /* END scrolling to element */ 

这个脚本应该是$(document).ready(function(){});

你仍然可以使用ScrollTo。 您可能希望在其中没有锚点的情况下呈现页面,然后使用在加载页面时运行的JavaScript以从URL获取锚点。 然后,您可以使用该文本滚动到特定ID。

不确定如何在页面中间获取项目,但您可以指定滚动的偏移量。

我不想说这是不可能的,但是……它至少会非常具有挑战性。 浏览器(或至少我知道的所有浏览器)一旦页面的那部分加载就滚动到锚点; AFAIK没有基于Javascript的方法来避免这种情况(你需要一个浏览器插件或其他东西)。

但是,我认为您可以使用“在页面完全加载之前不显示页面”的变体来获取您想要的行为。 换句话说,你会:

  1. 隐藏所有页面的内容(例如,有一个包装整个页面的DIV,并在其上放置“display:none”样式)

  2. 将“onLoad”事件处理程序附加到取消隐藏DIV的页面,并…

  3. 在同一个“onLoad”事件处理程序中,使用标准JS滚动机制(ie.ScrollTo)滚动到锚点(我想你可以通过检查window.location来确定要滚动到哪个锚点)

从理论上讲,因为浏览器会在#1和#2之间进行浏览器滚动(因为无处可滚动,内容被隐藏,所有内容,我想它根本不会做任何事情),滚动机制你在#3中使用不应该有任何干扰。

话虽如此,以上所有都是一个完全未经测试的计划; 你的里程我的变化。 即使它确实有效,但实施起来也痛苦,所以除非你真的想要这种行为,否则几乎肯定不值得。

那是不可能的

编辑

这种行为完全掌握在UA手中。