Question

最近我试图更频繁地使用jquery而且现在我有一些问题，我想用jquery来解决，希望你能帮助我。

我有一些网页，其中包含一些锚标记（假设锚点位于页面中间），并且在事件onload上我希望页面从该特定锚标记位置开始，这意味着页面将是“滚动“自动到某个位置。

这是我之前的解决方案（因为它将#i添加到我的网址，这非常难看）

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

无论如何，你能告诉我怎样才能用jquery做到这一点？

注意：我不希望用户在到达此位置时感觉到任何幻灯片或效果

Answer 1

使用以下简单示例

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

其中ele是您的元素（jQuery）..例如：scrollToElement($('#myid'));

Answer 2

没有必要使用jQuery，因为这是native JavaScript functionality

element.scrollIntoView()

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

       }
   });
});

有关工作示例，请参阅http://pro.lightningsoul.com/?c=media&sc=article&cat=coding&id=30#content。

Answer 4

查看this

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

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

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

Answer 6

我是这样实现的。

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

Answer 7

只需使用scrollTo插件

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

Answer 8

只需将#[id of the div you want to scroll to]附加到您的网页网址即可。例如，如果我想滚动到此stackoverflow问题的版权部分，则URL将从

更改

http://stackoverflow.com/questions/9757625/jquery-how-to-scroll-to-certain-anchor-div-on-page-load

到

http://stackoverflow.com/questions/9757625/jquery-how-to-scroll-to-certain-anchor-div-on-page-load#copyright

注意网址末尾的#copyright。

jQuery：如何在页面加载时滚动到某个锚点/ div？

8 个答案: