jQuery：如何在页面加载时滚动到特定的锚点/分区？

Question

最近我尝试更频繁地使用jQuery，现在我遇到了一些问题，希望您能帮助我解决。

我的网页中包含一些锚点（假设该锚点位于页面中间），在“onload”事件上，我希望页面从特定的锚点位置开始，即页面将自动“滚动”到特定位置。

这是我以前的解决方案（这很丑陋，因为它会向我的URL添加 #i）。

window.onload = window.location.hash = 'i';

无论如何，你能告诉我如何使用jQuery实现吗？

注意：我不希望用户在跳转到这个位置时感受到任何幻灯片或特效。

- Popokoko

---

所以您只想让用户“弹出”到该部分，没有任何幻灯片效果吗？ - Joseph

Answer 1

使用以下简单示例

function scrollToElement(ele) {
    $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left);
}

这里的ele是你的元素(jQuery)。例如：scrollToElement($('#myid'));

- Manse

---

非常完美！！ :) 只是出于兴趣，我想学习更多其他解决方案，尽管我现在很满意 :) - Popokoko

@Himu，这很简单...它将滚动位置设置为您传递的元素的左上角。 - Manse

Answer 2

不需要使用jQuery，因为这是本地的JavaScript功能

element.scrollIntoView()

- graham mendick

---

这应该是正确的答案，问题中的示例没有使用jQuery。 - Reshape Media

@ReshapeMedia 我同意这是最简单的答案 - 但请先阅读问题 -> 无论如何，你能告诉我如何使用jquery吗？ - Manse

我遇到了“scrollIntoView不是一个函数”的问题。 - Abram

根据文档，仅在Firefox中支持。 - st35ly

scrollIntoView有广泛的支持（只有Firefox支持选项参数）。 - graham mendick

这应该在页面加载后执行，就像这里所说的那样。 - J3soon

Answer 3

我已经尝试了几个小时，最简单的方法来阻止浏览器跳转到锚点而不是滚动到它的位置是：使用另一个锚点（一个在您网站上未使用的id）。因此，您可以将链接从“http://#YourActualID”更改为“http://#NoIDonYourSite”。这样，浏览器就不会再跳转了。

然后，只需检查是否设置了锚点（使用下面提供的脚本，该脚本摘自其他线程！），并设置要滚动到的实际id。

$(document).ready(function(){


  $(window).load(function(){
    // Remove the # from the hash, as different browsers may or may not include it
    var hash = location.hash.replace('#','');

    if(hash != ''){

       // Clear the hash in the URL
       // location.hash = '';   // delete front "//" if you want to change the address bar
        $('html, body').animate({ scrollTop: $('#YourIDtoScrollTo').offset().top}, 1000);

       }
   });
});

请查看https://lightningsoul.com/media/article/coding/30/YOUTUBE-SOCKREAD-SCRIPT-FOR-MIRC#content，以查看一个可行的示例。

- Lightningsoul

---

这个解决方案对我非常有效，但是我已经：a) 将动画延迟从1000减少到400；b) 在URL地址栏中保持哈希不变，并且c) 将#YourIDtoScrollTo更改为'+hash+'，以便滚动到我的网站提供的任何动态哈希和用户导航到... - Hudson Santos

好的。我建议为需要这个功能的人实现你的更改。除了延迟，这是可选的，根据每个开发者的需求而定。;) - Lightningsoul

为什么你要同时使用 $(document).ready(function() 和 $(window).load(function()？ - Chuck Le Butt

@ChuckLeButt 这段代码已经从另一个线程中提取出来了，正如所提到的。我猜测这是为了对抗浏览器中的一些奇怪的 bug。 如果你想了解更多信息，这里有一个线程 https://dev59.com/xG435IYBdhLWcg3w1z0t - Lightningsoul

Answer 4

i achieve it like this..

if(location.pathname == '/registration')
{
$('html, body').animate({ scrollTop: $('#registration').offset().top - 40}, 1000);
}

- Asad Ali Khan

Answer 5

    /* START --- scroll till anchor */
        (function($) {
             $.fn.goTo = function() {
                  var top_menu_height=$('#div_menu_header').height() + 5 ;
                  //alert ( 'top_menu_height is:' + top_menu_height );
                  $('html, body').animate({
                        scrollTop: (-1)*top_menu_height + $(this).offset().top + 'px'
                  }, 500);
                  return this; // for chaining...
             }
        })(jQuery);

        $(document).ready(function(){

          var url = document.URL, idx = url.indexOf("#") ;
          var hash = idx != -1 ? url.substring(idx+1) : "";

          $(window).load(function(){
             // Remove the # from the hash, as different browsers may or may not include it
             var anchor_to_scroll_to = location.hash.replace('#','');
             if ( anchor_to_scroll_to != '' ) {
                 anchor_to_scroll_to = '#' + anchor_to_scroll_to ;
                 $(anchor_to_scroll_to).goTo();
             }
            });
        });
    /* STOP --- scroll till anchror */

- Yordan Georgiev

Answer 6

看一下this。

将#value附加到地址中是浏览器（如IE）用于识别页面上命名锚点位置的默认行为，因为这来自Netscape。

您可以拦截并删除它，请阅读this文章。

- JadedEric

---

这是一个动画版本... OP想要没有动画！ - Manse

OP可以修改代码，这些功能示例可以帮助他朝着正确的方向前进。 - JadedEric

Answer 7

只需使用scrollTo插件

$("document").ready(function(){
  $(window).scrollTo("#div")
})

- nitesh sharma

---

我添加了插件，但它仍然显示为"$('window').scrollTo不是一个函数"。 - Popokoko

很抱歉，它是 $(window).scrollTo("#id") 或者你也可以使用 $.scrollTo("#id")。 - nitesh sharma

Answer 8

只需将#[要滚动到的div的id]附加到您的页面URL即可。例如，如果我想滚动到此stackoverflow问题的版权部分，则URL将从原来的...变为...

https://dev59.com/CGkw5IYBdhLWcg3wn8CO

到

https://dev59.com/CGkw5IYBdhLWcg3wn8CO#copyright

请注意在此URL结尾处的版权声明#copyright。

- Bopsi

---

欢迎提供解决方案的链接，但请确保您的回答即使没有链接也是有用的：在链接周围添加上下文，以便其他用户了解它是什么以及为什么存在，然后引用页面上最相关的部分，以防目标页面不可用。仅包含链接的答案可能会被删除。 - dippas