最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How do I animate scroll on a mobile webbrowser using jQuery? - Stack Overflow

programmeradmin3浏览0评论

What I wan't to achieve is the page to scroll to a certain position when a button is pressed. I have this working on browsers like Chrome and IE but it doesn't seem to work on any mobile browser.

This is the code I use:

$("#programmaMenu").on("click", "div", function(event){
        event.preventDefault();
        $('html').stop().animate({
            scrollTop: $("#"+$(this).attr("rel")).position().top - 120
        }, 500, 'swing');
});

The event does fire, only the scrolling doesn't occur.

What I wan't to achieve is the page to scroll to a certain position when a button is pressed. I have this working on browsers like Chrome and IE but it doesn't seem to work on any mobile browser.

This is the code I use:

$("#programmaMenu").on("click", "div", function(event){
        event.preventDefault();
        $('html').stop().animate({
            scrollTop: $("#"+$(this).attr("rel")).position().top - 120
        }, 500, 'swing');
});

The event does fire, only the scrolling doesn't occur.

Share Improve this question edited Aug 28, 2013 at 9:04 Bart Burg asked Aug 28, 2013 at 8:57 Bart BurgBart Burg 4,9248 gold badges55 silver badges87 bronze badges 2
  • 1 Try selecting both html and body elements: $('html, body') – Ram Commented Aug 28, 2013 at 9:02
  • Thank you, that's the answer – Bart Burg Commented Aug 28, 2013 at 9:03
Add a ment  | 

2 Answers 2

Reset to default 6

With thanks to the user vohuman, this is the answer:

Apparently mobile browsers scroll the body element and desktop browsers scroll the html element. Therefor, the solution to the question is selecting both the elements 'html' and 'body' like so:

$("#programmaMenu").on("click", "div", function(event){
        event.preventDefault();
        $('html, body').stop().animate({
            scrollTop: $("#"+$(this).attr("rel")).position().top - 120
        }, 500, 'swing');
});

Use this and try,

    $(document).on("click", "#programmaMenu", function(event){
    event.preventDefault();
    $('html').stop().animate({
        scrollTop: $("#"+$(this).attr("rel")).position().top - 120
    }, 500, 'swing');
    });
发布评论

评论列表(0)

  1. 暂无评论