jQuery从不同页面滚动到ID [英] jQuery scroll to ID from different page

问题描述

我试图在某些页面中使用jQuery的页面滚动，并且可以成功地进行平滑的页面滚动.我现在唯一的问题是尝试从其他页面执行此操作.我的意思是，如果我单击页面中的链接，它将加载新页面，然后滚动到特定的div元素.

I was trying to use jQuery's page scroll inside some pages and could successfully make a smooth page scroll. The only problem I have now is when attempting to do that from different page. What I mean by that is if I click on a link in a page, it should load the new page and then scroll to the specific div element.

这是我用来在页面内滚动的代码:

Here is the code I used to scrolling inside the page:

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;
});

我希望这个主意很清楚.

I hope the idea is clear.

谢谢

非常重要的提示: 我上面发布的这段代码在同一页面内也很好用，但是我要做的是单击一个页面上的链接，然后转到另一页面，然后滚动到目标.我希望现在已经清楚了.谢谢

Very important Note: This code I posted above works great inside the same page, but what I'm after is to click a link from one page and go to another one and then scroll to the target. I hope it is clear now. Thanks

推荐答案

您基本上需要这样做:

• 将目标哈希包含在指向另一页(href="other_page.html#section")的链接中
• 在您的ready处理程序中，清除通常由哈希决定的硬跳转滚动，并尽快将页面滚动回到顶部并调用jump()-您需要异步执行此操作
如果没有事件，请在jump()中
• ，将location.hash作为目标
• 此技术也可能无法及时捕捉，因此最好将html,body隐藏起来，并在将其滚动回零时将其显示回去

• include the target hash into the link pointing to the other page (href="other_page.html#section")
• in your ready handler clear the hard jump scroll normally dictated by the hash and as soon as possible scroll the page back to the top and call jump() - you'll need to do this asynchronously
• in jump() if no event is given, make location.hash the target
• also this technique might not catch the jump in time, so you'll better hide the html,body right away and show it back once you scrolled it back to zero

这是添加了以上代码的代码:

This is your code with the above added:

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();
    }
});

经过验证可在Chrome/Safari，Firefox和Opera中使用. Dunno就是关于IE的.

Verified working in Chrome/Safari, Firefox and Opera. Dunno about IE though.

这篇关于jQuery从不同页面滚动到ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！