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 中使用.虽然我不知道 IE.

Verified working in Chrome/Safari, Firefox and Opera. I don't know about IE though.

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