Develop Reference

Datatables scroll top on page change

I have a problem. I would like to scroll top of table on page change when using datatables.
I've added the following code
$('#tableId').on( 'page.dt', function () {
$('html, body').animate({
scrollTop: 0
}, 200);
});
(at the moment it scrolls to top of page) but it doesn't completely work.
When I click other page, page is scrolled top, but just after data is loaded it scrolls down again. I don't know what is happening (I'm not JavaScript guru) but it seems Datatables runs extra action after data are loaded that scrolls again to bottom. Is there any way to prevent Datatables (probably) from scrolling down after loading data?
I could use draw.dt instead of page.dt and it would work fine but it would cause other side effects. If table is placed somewhere on page, just after loading data, it would be scrolled to top of page (or top of table) and I would like to run this only after changing page.

I figured it out, but it took me a lot of time. The issue was when I was using Bootstrapped version:
<script type="text/javascript" src="https://cdn.datatables.net/t/bs/jq-2.2.0,dt-1.10.11/datatables.min.js"></script
when I changed it into:
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.js"></script>
it was working fine.
So finally I noticed I can include it like so (datatables and bootstrap plugin in separate files):
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
The problem was in last file (not minified version is here - https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.js ). In this file there is a line:
$(host).find( '[data-dt-idx='+activeEl+']' ).focus();
this exact line causes that when I clicked on button to change page after loading data focus was moved again to bottom of page. When I used this file locally and commented this line, now when I used:
$('#tableId').on( 'page.dt', function () {
$('html, body').animate({
scrollTop: 0
}, 200);
});
I was moved to top of page, and when I used;
$('#tableId').on( 'page.dt', function () {
$('html, body').animate({
scrollTop: $('#tableId').offset().top
}, 200);
});
I was moved to top of table.

This works well globally, without having to write code to target each table on your site/application.
// Scroll back to top of datatable when its pagination button is clicked to load/display next page
$('.dataTables_wrapper').click(function(event) {
var clickedElem = event.target;
if ($(clickedElem).hasClass("paginate_button") || $(clickedElem).parents('.dataTables_paginate').length) {
/* Not when the button is diabled */
if (!$(clickedElem).hasClass("disabled") && !$(clickedElem).parents('.disabled').length) {
let divContainingTheDataTable = $(clickedElem).closest('.dataTables_wrapper');
$('html, body').animate({
scrollTop: $(divContainingTheDataTable).offset().top - 60
}, 200);
}
}
});

jQueryMobile - Scroll to a position onLoad

In jQueryMobile, on the page load, I would like to scroll to a given position. I know how to do it in classic jQuery, but in jQueryMobile there is an auto scroll top on the page load.
I tried to do :
$( document ).ready(function() {
$.mobile.silentScroll(1000);
});
That doesn't work. My page stay blocked to the top of the page.
While if i click on a link with onclick="$.mobile.silentScroll(1000);" that works perfectly !
I just would like to scroll to a yPosition on the page load :) !
=======EDIT============
After suggestions of White Raven and Omar I've tried to do this :
$( document ).delegate("#pagePkmn", "pageinit", function() {
$.mobile.silentScroll(1000);
});
OR this :
$(document).one("pagecontainershow", function () {
$.mobile.silentScroll(1000);
});
But still no effect ...
Thanks for your attention.

Using $(document).ready() is a bad idea:
http://view.jquerymobile.com/1.3.1/dist/demos/faq/dom-ready-not-working.html
It is recommended to use pageinit
=== EDIT ===
You can always use the ghetto way:
setTimeout(function(){$.mobile.silentScroll(1000);}, 1000); // scroll after 1 second

Use pagecontainershow as it triggers after page is shown and JQM performes a default scroll to page's top.
$(document).one("pagecontainershow", function () {
/* scroll */
});

go to top of the page using jquery in chrome

I'm using a ui theme called nightsky
After I scroll to the bottom of the page I want to go back to the top of the page.
What I have tried already in dev console :
window.scrollTo(0, $("body").offset().top);
window.scrollTo(0, $("#main").offset().top();
The following:
$('html, body').animate({
scrollTop: $('#main').position().top },
1000
);
seems to work in firefox not in chrome
$('html,body').animate({scrollTop: 0});
I am looking for a code that can be executed in console! no on-click listeners etc...just few lines of code

Try jQuery .scrollTop(),
$(window).scrollTop(0) //Or $('body').scrollTop(0)
Demo

why dont you use Go to top

You can try:
Click

Try this
$(document).ready(function(){
$('.top').on('click', function() {
$('html,body').animate({'scrollTop':'0px'},1000);
});
});
here is demo link : http://jsfiddle.net/jkkheni/JWJ5N/13/

JAVASCRIPT - script conflicts?

I have a Carousel made from bootstrap and this is the script to run it.
<script>
!function ($)
{
$(function()
{
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
I tried adding a different effect on the navigation bars I got so that when I click the navigation, it will slide up into the section in that page. I added this script.
<script>
$('a').click(function()
{
$('html, body').animate(
{
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
</script>
when I added the script, the left and right buttons in the carousel stopped working. I really don't know if it had a conflict with the second script. I spent around half an hour looking for the error and finally found out that the second script conflicted with the carousel script.
Is there an error in the scripts? How do I fix it?

My guess is that
$('a').click(function() { /* ... */ })
conflicts with the click event handler set up by carousel(). You could add a class on your navigation links (or use whatever nav class is already there), and use a more specific selector in this second script.

Oh.
Figured it out just now.
Added li in $('a').click(function()
Now it looks like $('li a').click(function()
It doesn't conflict now :))

Jquery conflict with flexslider

I want to scroll to a div when I load my page, and I can do it using Jquery with this:
<script>
$(document).ready(function (){
$('html, body').animate({
scrollTop: $(".active").offset().top
}, 2000);
return false;
});
</script>
In the same page I have a slider created using flexslider.
After importing flexslider css and js I done this:
<script type="text/javascript">
(function($) {
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
})(jQuery);
</script>
At this link you can see all the flexslider file: https://github.com/woothemes/FlexSlider
The problem is when the page is loaded, the scroll start correctly, but at a certain point
seems that while the scrollout is running the slider is loaded at the same time and this creates problems to the scrollout that does not seem to know where to position the window.
Anyone can help me? I'm getting mad with this, I tried to find an answer on the net but I have not met anyone with my problem.
Thank you.