JQuery ScrollTo not working in Chrome

Question

JQuery ScrollTo not working in Chrome

I am creating a horizontal scrolling website. I am using this jQuery plugin for auto scrolling. Below is the code.

Html

<head>
<link type="text/css" rel="stylesheet" href="stylesheets/styles.css" />

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div id="container">

<div id="navigation">
    <ul>
        <li>
            <div class="menubutton" id="homeLink"><a class="menuitem" href="#"></a></div>
        </li>
        <li>
            <div class="menubutton" id="aboutLink"><a class="menuitem" href="#"></a></div>
        </li>
        <li>
            <div class="menubutton" id="musicLink"><a class="menuitem" href="#"></a></div>
        </li>
    </ul>
</div><!-- end of navigation -->


<div id="firstMark"></div>

<div id="secondMark"></div>

<div id="thirdMark"></div>

</div>

</body>
</html>

CSS

@charset "utf-8";

ul li { list-style-type:none; }

/* navigation */
#navigation { position:fixed; z-index:5; bottom:80px; left:-26px; background-color:#FFF; width:70px; height:190px; border-top-right-radius:10px; border-bottom-right-radius:10px; }

.menubutton { float:left; width:20px; height:20px; border-radius: 50%; background-color:#F00; margin-bottom:15px; }

.menubutton:hover { cursor:pointer; }

#homeLink { background-color:#007FD2; }
#aboutLink { background-color:#C7007A; }
#musicLink { background-color:#FFDB1A; }
#brandsLink { background-color:#000; }
#contactLink { background-color:#F90; }

#homeLink:hover { background-color:#006DB4; }
#aboutLink:hover { background-color:#99005E; }
#musicLink:hover { background-color:#FFC61A; }
#brandsLink:hover { background-color:#333; }
#contactLink:hover { background-color:#F60; }


#container {
    position:absolute;
    width:10000px;
    height:100%;
    background-color:#FFC;  
    top:0;
    left:0;
}

#firstMark {
    position:absolute;
    width:1px;
    height:1px;
    left:3000px;    
}

#secondMark {
    position:absolute;
    width:1px;
    height:1px;
    left:6000px;    
}

#thirdMark {
    position:absolute;
    width:1px;
    height:1px;
    left:9000px;    
}

JavaScript

$(document).ready(function(e) {

    $('#homeLink').click(function(e) {
        e.preventDefault();
        $.scrollTo(0,0, {duration: 2000});
    });

    $('#aboutLink').click(function(e) {
        e.preventDefault();
        $.scrollTo('#firstMark', {duration: 2000});
    });

    $('#musicLink').click(function(e) {
        e.preventDefault();
        $.scrollTo('#secondMark', {duration: 2000});
    });

});

Here's a link to the demo page. This works in Firefox (v18), Opera (v12), Safari (v5.1.2) and even Internet Explorer 9, but doesn't work in Chrome (v24).

Can anyone tell me what is missing here? Is this something wrong with my code or a bug in the plugin?

If not, please tell me if there are other alternatives to auto-scrolling that also supports horizontal scrolling.

Thank.

+3

javascript jquery html jquery-plugins scrollto

Isuru Jan 27. '13 at 9:14

source to share

4 answers

Emad · Answer 1 · 2013-05-02T08:02:20+0000

Old question, but I'll write my own experience. I had the same problem with a plugin downloaded from http://flesler.blogspot.com/2007/10/jqueryscrollto.html

This plugin in the article is out of date, you can download the latest version here: https://github.com/flesler

Also you will also have to change

$.scrollTo(0,0, {duration: 2000});

to

$.scrollTo("0px","0px", {duration: 2000});

diggersworld · Answer 2 · 2013-01-27T09:17:13+0000

Your anchor can receive an event click

, not a div.

Just try it quickly:

$('#homeLink a').click(function(e) {
    e.preventDefault();
    alert('click');
    $.scrollTo(0,0, {duration: 2000});
});

I added alert('click')

so you can determine if it was detected.

Adil · Answer 3 · 2013-01-27T09:17:12+0000

Try using px to scroll the value

Edit

 $.scrollTo(0,0, {duration: 2000});

to

 $.scrollTo(0px,0px, {duration: 2000});

BenLeah · Answer 4 · 2014-02-26T16:49:22+0000

The bug lies in webkit's ability to animate the body. Instead, create a div just inside the body and animate it ...

<body>
    <div class="wrapper">
        <nav>
            <a class="scroll-to-id" href="#" data-target="section1">Section 1</a>
            <a class="scroll-to-id" href="#" data-target="section2">Section 2</a>
        </nav>
        <section>
            <a id="section1">&nbsp;</a>
            <p>Some content<p>
        </section>
        <section>
            <a id="section2">&nbsp;</a>
            <p>Some more content<p>
        </section>
    </div>
</body>

Note. ... In my personal experience, the ID can be just as efficiently applied to the tag, rather than redundant, and it still works ... I only did it in this example because some users noted problems with targeting IDs above the DOM tree than this .. I couldn't personally recreate this problem, so it works anyway!

Then create a shell element and body to behave properly

body { position:relative; }

.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }

Then jQuery

$('.scroll-to-id').on('click', function(event) {
    event.preventDefault();
    var target = "#" + $(this).data('target');
    $('.wrapper').animate({
        scrollTop: $(target).offset().top
    }, 1500);
});

JQuery ScrollTo not working in Chrome

More articles: