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

我希望这个想法是清楚的

谢谢

非常重要的注意事项：

---

我上面发布的这段代码在同一个页面中非常有效，但我要做的是单击一个页面中的链接，转到另一个页面，然后滚动到目标页面。我希望现在一切都清楚了。谢谢在链接上放置哈希：

<a href="otherpage.html#elementID">Jump</a>

---

在另一个页面上，您应该将id设置为

elementID

的元素滚动到。当然，您可以更改它的名称。

您基本上需要这样做：

• 将目标哈希包含到指向其他页面的链接中（

  href=“other_page.html”section“

  ）
• 在

  ready

  处理程序中，清除通常由散列指定的硬跳转滚动，并尽快将页面滚动回顶部并调用

  jump（）

  ——您需要异步执行此操作
• 在

  jump（）

• 此外，这种技术可能无法及时捕获跳转，因此最好立即隐藏

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

---

已验证在Chrome/Safari、Firefox和Opera中工作。不过我不知道IE。

我想推荐使用scrollTo插件

您可以通过jquery css选择器设置scrollto

$('html,body').scrollTo( $(target), 800 );

---

我很幸运这个插件和它的方法的准确性，而其他实现相同效果的方法，比如使用

.offset（）

或

.position（）

在过去对我来说都不是跨浏览器的。并不是说你不能使用这种方法，我相信有一种方法可以跨浏览器使用，我只是发现scrollTo更可靠

我制作了一个可重复使用的插件，可以做到这一点。。。我把事件绑定放在插件本身之外，因为我觉得对于这样一个小助手来说，它太麻烦了

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

});

接下来，我们可以进行onload操作，检查是否有散列，如果有，请尝试将其直接用作jQuery的选择器。现在我当时无法轻松测试，但不久前我为生产现场制作了类似的东西，如果这不能立即起作用，请告诉我，我将研究我在那里得到的解决方案

（脚本应该在onload部分中）

接下来，我们将插件绑定到onclick锚，这些锚只在其href属性中包含一个散列

（脚本应该在onload部分中）

由于如果匹配本身失败，jQuery不会做任何事情，因此当无法找到页面上的目标时，我们有一个很好的回退方法是的\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();
});

这里还有一个简单的JSFIDLE，演示了页面内的滚动，onload有点难设置

更新2

因此，如果窗口已经滚动到元素onload，您可能会遇到麻烦。这修复了：

window.scrollTo（0,0）它只是将页面滚动到左上角。将其添加到上面的代码段中

function scroll_down(){
    $.noConflict();
    jQuery(document).ready(function($) {
        $('html, body').animate({
            scrollTop : $("#bottom").offset().top
        }, 1);
    });
    return false;
}

这里的“bottom”是您想要滚动到的div标签id。要更改动画效果，可以将时间从“1”更改为不同的值
结合Petr和Sarfraz的答案，我得出以下结论

在第1.html页：

<a href="page2.html#elementID">Jump</a>



在第2.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>


$（文档）.ready（函数（）{
$（'html，body'）.hide（）；
if（window.location.hash）{
setTimeout（函数（）{
$（'html，body'）.scrollTop（0.show（）；
$（'html，body'）。设置动画({
scrollTop:$（window.location.hash）.offset（）.top
}, 1000)
}, 0);
}
否则{
$（'html，body'）.show（）；
}
});
我写了一些东西，可以检测页面是否包含单击的锚，如果不包含，则转到正常页面，否则会滚动到特定部分：

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

谢谢你的回答。我会尝试一下，并在完成后提供一些反馈。谢谢，阿加尼试过了，但没用。我想要么是我遗漏了什么，要么是有什么不对劲。我在一个href链接上做了一个散列，但仍然不确定将另一个代码放在哪里。结果是，当我点击链接时，它直接进入div的页面，而不滚动到它，这很奇怪。我相信代码与此有关，所以平滑滚动工作。。。你知道怎么处理吗？谢谢大家的回复。每当我完成手头的工作时，我会检查你的所有答案。这对我很有用。我为需要帮助的人评论它it@Sarfraz如果可能的话，你能检查一下吗？谢谢你的回答。我知道这个解决方案，而且我记得，它用于在一个页面内滚动，而不是从一个页面滚动到另一个页面，然后滚动到目标页面。很抱歉，谢谢您的尝试。只能在文档或文档元素中滚动。我不明白你说的“页面”是什么意思了。您不能滚动到其他文档。可能有点混乱。单击a页上的链接转到B页，然后向下滚动到div元素。这就是我想要实现的，但没关系，解决方案就在那里。谢谢你，我的解决方案就是这样。不过不用担心，选择适合你的答案。我知道这很旧，但它不是滚动到更多的使用插件滚动。localThank@vijayrk为答案。此代码也用于页面内的滚动，而不是
<a href="page2.html#elementID">Jump</a>

<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>

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