jQuery从不同的页面滚动到ID
我试图在一些页面中使用jQuery的页面滚动，并可以顺利地进行页面滚动。 我现在唯一的问题是，当试图从不同的页面做到这一点。 我的意思是，如果我点击一个页面中的链接，它应该加载新的页面，然后滚动到特定的div元素。
这里是我用来在页面内滚动的代码：
var jump=function(e) { //prevent the "normal" behaviour which would be a "hard" jump e.preventDefault(); //Get the target var target = $(this).attr("href"); //perform animated scrolling $('html,body').animate( { //get top-position of target-element and set it as scroll target scrollTop: $(target).offset().top //scrolldelay: 2 seconds },2000,function() { //attach the hash (#jumptarget) to the pageurl location.hash = target; }); } $(document).ready(function() { $('a[href*=#]').bind("click", jump); return false; }); 我希望这个想法很清楚。
谢谢
非常重要的注意 ：我上面发布的代码在同一页面内工作得很好，但是我之后要点击一个页面上的链接并转到另一个页面，然后滚动到目标。 我希望现在很清楚。 谢谢
你基本上需要这样做：
- 将目标哈希包含在指向其他页面的链接中（
href="other_page.html#section"） - 在你的
ready处理程序清除通常由散列规定的硬跳转滚动，并尽快滚动页面回到顶部，并调用jump()– 你需要这样做asynchronous - 在
jump()如果没有给定事件，则使location.hash成为目标 - 这种技术也可能赶不上时间的跳跃，所以你最好隐藏
html,body立即显示回滚到零
这是你的代码与上述添加：
var jump=function(e) { if (e){ e.preventDefault(); var target = $(this).attr("href"); }else{ var target = location.hash; } $('html,body').animate( { scrollTop: $(target).offset().top },2000,function() { location.hash = target; }); } $('html, body').hide(); $(document).ready(function() { $('a[href^=#]').bind("click", jump); if (location.hash){ setTimeout(function(){ $('html, body').scrollTop(0).show(); jump(); }, 0); }else{ $('html, body').show(); } });
validation在Chrome / Safari，Firefox和Opera中工作。 不知道IE浏览器。
在链接上放一个哈希：
<a href="otherpage.html#elementID">Jump</a>
而在其他页面上，您可以执行以下操作：
$('html,body').animate({ scrollTop: $(window.location.hash).offset().top });
在其他页面上，您应该将id设置为elementID元素滚动到。 当然你可以改变它的名字。
结合Petr和Sarfraz的答案，我得出以下结论。
在page1.html中：
<a href="page2.html#elementID">Jump</a>
在page2.html上：
<script type="text/javascript"> $(document).ready(function() { $('html, body').hide(); if (window.location.hash) { setTimeout(function() { $('html, body').scrollTop(0).show(); $('html, body').animate({ scrollTop: $(window.location.hash).offset().top }, 1000) }, 0); } else { $('html, body').show(); } }); </script>
我想推荐使用scrollTo插件
http://demos.flesler.com/jquery/scrollTo/
你可以通过jQuery的CSSselect器设置scrollto。
$('html,body').scrollTo( $(target), 800 );
我对这个插件及其方法的准确性感到非常.offset() ，其中使用.offset()或.position()等其他方法实现相同效果的方法在过去未能通过浏览器。 不是说你不能使用这样的方法，我敢肯定有一种方法可以跨浏览器，我刚刚发现scrollTo更可靠。
function scroll_down(){ $.noConflict(); jQuery(document).ready(function($) { $('html, body').animate({ scrollTop : $("#bottom").offset().top }, 1); }); return false; }
这里的“bottom”是你想要滚动到的div标签id。 要更改animation效果，可以将时间从“1”更改为不同的值
我做了一个可重用的插件，可以做到这一点…我把绑定的事件外插件本身，因为我觉得这是一个这样的小帮手太侵入….
jQuery(function ($) { /** * This small plugin will scrollTo a target, smoothly * * First argument = time to scroll to the target * Second argument = set the hash in the current url yes or no */ $.fn.smoothScroll = function(t, setHash) { // Set time to t variable to if undefined 500 for 500ms transition t = t || 500; setHash = (typeof setHash == 'undefined') ? true : setHash; // Return this as a proper jQuery plugin should return this.each(function() { $('html, body').animate({ scrollTop: $(this).offset().top }, t); // Lets set the hash to the current ID since if an event was prevented this doesn't get done if (this.id && setHash) { window.location.hash = this.id; } }); }; });
现在接下来，我们可以做这个，检查一个散列，如果它有尝试直接用它作为jQuery的select器。 现在我不能轻易地testing这个，但是我不久前为生产网站做了类似的东西，如果这不是马上让我知道的话，我会研究一下我到达的解决scheme。
（脚本应该在onload部分）
if (window.location.hash) { window.scrollTo(0,0); $(window.location.hash).smoothScroll(); }
接下来，我们将插件绑定到在其href属性中只包含散列的锚点上。
（脚本应该在onload部分）
$('a[href^="#"]').click(function(e) { e.preventDefault(); $($(this).attr('href')).smoothScroll(); });
由于jQuery没有做任何事情，如果匹配本身失败，我们有一个很好的回退，当一个页面上的目标无法find耶\ o /
更新
替代onclick处理程序滚动到顶部时，只有一个哈希：
$('a[href^="#"]').click(function(e) { e.preventDefault(); var href = $(this).attr('href'); // In this case we have only a hash, so maybe we want to scroll to the top of the page? if(href.length === 1) { href = 'body' } $(href).smoothScroll(); });
这里也是一个简单的jsfiddle，演示页面内的滚动，onload有点难以设置…
http://jsfiddle.net/sg3s/bZnWN/
更新2
所以你可能会遇到麻烦，窗口已经滚动到元素onload。 这解决了这个问题： window.scrollTo(0,0); 它只是将页面滚动到左上angular。 将它添加到上面的代码片段。
我已经写了一些东西，检测页面是否包含被点击的锚，如果没有，则转到正常页面，否则滚动到特定的部分：
$('a[href*=\\#]').on('click',function(e) { var target = this.hash; var $target = $(target); console.log(targetname); var targetname = target.slice(1, target.length); if(document.getElementById(targetname) != null) { e.preventDefault(); } $('html, body').stop().animate({ 'scrollTop': $target.offset().top-120 //or the height of your fixed navigation }, 900, 'swing', function () { window.location.hash = target; }); });
