Question

我试图在某些页面中使用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;
});

我希望这个想法很明确。

谢谢

非常重要提示：我在上面发布的这段代码在同一页面内工作得很好，但我所追求的是从一个页面点击一个链接然后转到另一个页面，然后滚动到目标。我希望现在很清楚。谢谢

Answer 1

你基本上需要这样做：

将目标哈希包含在指向其他页面（href="other_page.html#section"）
在您的ready处理程序中清除通常由哈希指示的硬跳转滚动，并尽快将页面滚动回顶部并调用jump() - 您需要异步执行此操作< / LI>
在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();
    }
});

已通过Chrome / Safari，Firefox和Opera验证。不过关于IE的Dunno。

Answer 2

在链接上放一个哈希：

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

在其他页面上，你可以这样做：

$('html,body').animate({
  scrollTop: $(window.location.hash).offset().top
});

在其他页面上，您应该将ID设置为elementID的元素滚动到。当然你可以改变它的名字。

Answer 3

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

Answer 4

我想建议使用scrollTo插件

http://demos.flesler.com/jquery/scrollTo/

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

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

我对这个插件及其方法的准确性感到非常幸运，其中实现相同效果的其他方法（例如使用.offset()或.position()）在过去无法跨浏览器。不是说你不能使用这样的方法，我确信有一种方法可以通过浏览器进行，我发现scrollTo更可靠。

Answer 5

我制作了一个可重复使用的插件，可以做到这一点......我将绑定留给了插件本身以外的事件，因为我觉得这对于这样一个小帮手来说太过于干扰......

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的选择器。现在我当时不能轻易测试这个，但我不久前为生产网站制作了类似的东西，如果这不是立即工作让我知道，我会调查我到那里的解决方案。

（脚本应该在onload部分内）

if (window.location.hash) {
    window.scrollTo(0,0);
    $(window.location.hash).smoothScroll();
}

接下来，我们将插件绑定到onclick锚点，这些锚点在其href属性中只包含一个哈希值。

（脚本应该在onload部分内）

$('a[href^="#"]').click(function(e) {
    e.preventDefault();

    $($(this).attr('href')).smoothScroll();
});

由于jQuery没有做任何事情，如果匹配本身失败，我们有一个很好的回退，当一个页面上的目标无法找到yay \ 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);它只是将页面滚动到左上角。将其添加到上面的代码段中。

Answer 6

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

此处“bottom”是您要滚动到的div标签ID。要更改动画效果，您可以将时间从“1”更改为其他值

Answer 7

我写了一些东西来检测页面是否包含点击的锚点，如果没有，则转到正常页面，否则它会滚动到特定部分：

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

jQuery滚动到不同页面的ID

7 个答案: