Languages

Menu
Sites
Language
ScrollTop

Hello,

I have a problem with ScrollTop, I would like scroll to a specific div:

Example:

This is the html code:

<div data-role="page" id="Page3" class="page MainPage ui-page ui-body-s ui-body-c ui-page-active" title="NRJ 12 Programmes" data-url="Page3" tabindex="0" style="min-height: 1279px;">
        	<section class="MainContent">

			<div id="lstprog">
            <div class="ProgramBlock" id="ProgramBlock1">...</div>
            <div class="ProgramBlock" id="ProgramBlock2">...</div>
            <div class="ProgramBlock" id="ProgramBlock3">...</div>
            <div class="ProgramBlock" id="ProgramBlock4">...</div>
            ...
            <div class="ProgramBlock" id="ProgramBlock60">...</div>
            
            </div>
            
    		</section> <!-- Main Content -->
    		    
</div>

 

When I click on a specific button, I would like to scroll to the div "ProgrameBlock20"

$("#TimeSection1").click(function() {
		$('#lstprog').animate({
            scrollTop:$('#ProgramBlock20').offset().top},
            'slow'); // doesn't work
			
			var pos = $('#ProgramBlock19').position();
			console.log(pos); // Works fine
})

But when I click on button (#TimeSection1), nothing happens

Do you know why?

Thanks

List

Responses

4 Replies
Raghavendra Reddy Shiva

 

Seems like ScrollTop is broken on Tizen web UI fw project. The below same code worked for me on jQuery project but din't work on Tizen web UI project.

$(document).ready(function() {
    $("#top").on('click',function(){                
        $('html, body').animate({scrollTop:$('#target-div-id').position().top}, 'slow');           
    });    
});

There's a bug already reported on this issue. Have commented there too.

https://bugs.tizen.org/jira/browse/TDIST-426

 

Andrew Gudz

Just cover your MainContant:

    <div data-role="content">
        	<section class="MainContent">
            ...
    </div>

After this scroll widget will appear.

Now you can use this widget like this:

$('div[data-role="content"]').scrollview('centerToElement', $('#ProgramBlock11'));

Also:

$('div[data-role="content"]').scrollview('scrollTo', 0, -200);
$('div[data-role="content"]').scrollview('getScrollPosition');

If you wont more look at source code (tizen-web-ui-fw\latest\js\modules\jquery.mobile.tizen.scrollview.js).

Benoit JOUANIGO

Thank you for your help but just the Page3 scroll a little bit (a few pixel) and not the lstprog.

Benoit JOUANIGO

I found the solution to my problem:

$('div[data-role="content"]').animate({scrollTop:$('#ProgramBlock20').position().top}, 'slow');

Thank you for your help

 

Regards,
Benoit