scrollTop() ?

scrollTop() ?

BY 17 Jan 2013 Web Application Development

Hi,

I’ve working on an app based on the tizen web ui framework and need to sroll back to top in the content-area, but none of the functions like silentScroll and scrollTop are working. If I use these functions in JQ Mobile based app they work.

So are there a way to sroll to top in an app based on the tizen web ui framework?

[EDIT]

OK, I found a workarround in resetting the style-attribute of the scroll-view:

$(.selector).find('div[class="ui-scrollview-view"]').attr("style","position: relative; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);-webkit-transition: none;");

But I think it would be better to have the silentScroll or scrollTop methodes working…

 

[EDIT2]

Mhhh, tried it in a new project and didn’t get it working.

index.html:

<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>Single-Page Application </h1>
        </div><!-- /header -->

        <div class="scroll" data-role="content" id="main">
            <p>TOP!</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>

            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>

            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>

            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>

            <div id="bottom"><p>BOTTOM!</p></div>
            <div data-role="button" id="button">TOP</div>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Footer content</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>

main.js:

//Initialize function
var init = function () {
    // TODO:: Do your initialization job
    console.log("init() called");

    $("div.scroll").scrollTop(1000);

    $('#button').bind("vclick", function(){
        try{
            alert($("div.scroll").scrollTop());
            $("div.scroll").scrollTop(0);
        }
        catch(err){
            console.log(err);
        }
    });
};
$(document).ready(init);

style.css:

body {
}

div.scroll {
    background:#bbbccc none repeat scroll 0 0;
    border:3px solid #222222;
    margin:5px;
    padding:5px;
    overflow:auto;
}

p {
    margin:15px;
    padding:5px;
    border:5px solid #777;

}

So this still won’t work, neither in WebSimulator nor on dev-device. Also I alwas get 0 as return of scrollTop()…

Maybee you have a different SDK?
I’m using:

Tizen SDK
Version : 2.0.0a
Build id : 20120913-1539
                
Written by