jQuery:滚动锚定时调用网址，替换浏览器的行为

StackOverflow https://stackoverflow.com/questions/1903574

  •  19-09-2019
  •  | 
  •  

题

我已经知道延插件ScrollTo，但是我没找到任何方式，直到现在，以实现如下：

用户得到我的网站(打字，而不通过点击的链接在我的网页)domain.com/bla.php#foo

和锚"#foo"存在。现在我想要浏览器的用户不会自动滚动"#foo"，而不是我想要顺利滚动使件'#foo'是关于在中间看而不是在绝对顶部位置的用户查看。

感谢这么远！

有帮助吗？

解决方案

如果你没有创建实际的锚foo，而是与像_foo的ID（类似<a id="_foo">）创建你的锚。您可以处理$(document).ready实现这一目标。

类似的信息（伪码）

$(document).ready(function() { 
    var elem = $('#_' + window.location.hash.replace('#', ''));
    if(elem) {
         $.scrollTo(elem.left, elem.top);
    }
});

其他提示

我做了一些增强的脚本从一月Jongboom所以现在看起来是这样的：

$(document).ready(function () {
    // replace # with #_ in all links containing #
    $('a[href*=#]').each(function () {
        $(this).attr('href', $(this).attr('href').replace('#', '#_'));
    });

    // scrollTo if #_ found
    hashname = window.location.hash.replace('#_', '');
    // find element to scroll to (<a name=""> or anything with particular id)
    elem = $('a[name="' + hashname + '"],#' + hashname);

    if(elem) {
         $(document).scrollTo(elem, 800);
    }

});

它改变在链接所有锚所以对于用户无javascript的行为将保持不变。

Machineghost的回答是非常有益的。我拼凑起来的代码需要一个URL PARAM，并把它变成一个散列标签，浏览器然后尽快的DOM准备滚动到。

的URL是这样的：

www.mysite.com/hello/world.htm?page=contact

联系是要滚动到ID的名称

<h1 id="contact">Contact Us</h1>

下面的代码：

// Get any params from the URL
$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var url = decodeURIComponent(window.location.href);
    var hashes = url.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
 }
});

$(document).ready(function() {
    // Unhide the main content area
    $('section.centered').fadeIn('slow');

    // Create a var out of the URL param that we can scroll to
    var page = $.getUrlVar('page');
    var scrollElement = '#' + page;

    // Scroll down to the newly specified anchor point
    var destination = $(scrollElement).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-75}, 800 );
    return false;
});

我在Chrome和FF核实这一点，它的工作非常出色。尝试调整“目的地-75”，如果滚动目标是不会给你希望它的确切位置。

我不能用上面的帖子做了，这样的感谢！

/* scrolling to element */
    var headerHeight = $('#header').height() + $('#header-bottom-cap').height() + 10; //When the header position is fixed
    $('a').click(function(){
        var hashEle = $(this).attr('href').split('#');
        if (hashEle.length > 1) {
            if (hashEle[1] == 'top') {
                $('body, html').animate({
                    scrollTop: 0
                },500);
            } else {
            jQuery('body, html').animate({
                scrollTop: $('#'+ hashEle[1]).offset().top - headerHeight
            },500);
            }
        };
    })
        // find element from url
hashname = window.location.hash.replace('#', '');
elem = $('#' + hashname);
if(hashname.length > 1) {
    if(hashname == 'top') {
    $('body, html').animate({
            scrollTop: 0
        },200); 
    } else {
     $('body, html').animate({
            scrollTop: $(elem).offset().top - headerHeight
        },500);
 }
};
/* END scrolling to element */

此脚本应进$（文件）。就绪（函数（）{}）;

您仍然可以使用ScrollTo。你想呈现一个不带锚的页面，然后使用JavaScript，当页面加载来从URL锚运行。然后可以使用该文本滚动到一个特定的ID。

不知道如何获得该项目在页面的中间，但你可以指定滚动的偏移。

我不想说这是不可能的，但是...它将至少是相当具有挑战性。浏览器(或至少所有的那些我知道的)滚动的锚点，尽快为这一部分的页面载荷；据我所知，没有基于Javascript的方式，以避免，(你需要一浏览器插件或某事)。

然而，我想你可能可以使用一个变体的"不显示的网页，直到该网页是全面装载的"剧本来可能得到你想要的行为.换句话说，你将：

  1. 隐藏所有的主页的内容预先负载(ie。有一个DIV包装你的整个网页，并把"显示：没有"式上它)

  2. 附加"加载"事件处理程序的网页，其中联合国隐藏你的DIV,并且...

  3. 在同样的"加载"事件处理程序，使用标准JS滚动机构(ie。ScrollTo)滚动到锚(我认为你将能够确定哪些锚滚动到通过检查窗口。位置)

在理论上，因为将浏览器将浏览器之间的滚动1和2(而且，由于有地方可以滚动到，什么内容被隐藏，所有的，我想它只是不会做任何事)，滚动的机构使用#3不应该有任何干扰。

这就是说，上述所有的是 完全 未经测试的计划；你的里程数我有所不同。即使它不工作，这将是一个疼痛的实现，所以除非你 真的 希望这种行为，它几乎肯定不值得的麻烦。

这是不可能的

修改

的行为完全是在UA的手中。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top