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/
Related
I got this code off the internet some years back. But whenever I update my wordpress to the latest Jquery version using Jquery updater plugin, it breaks. As soon as I revert back to the old version, it works again. By breaks, I mean that instead of scrolling to the top of the page, it moves the page up by about 10 pixels.
Is there anything in this code which is now incompatible with latest version of Jquery?
The script is for a button to scroll the page back to the top.
<script>
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() < 500) {
$('#scrolltotop') .fadeOut();
}
else {
$('#scrolltotop') .fadeIn();
}
});
$('#scrolltotop').on('click', function() {
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
</script>
Thank you so much for your help everyone.
Try the code below, hope it'll help
$('#scrolltotop').on('click', function() {
$('html, body').animate({
scrollTop: $("body").offset().top
}, 500);
return false;
});
I am trying to add a function to my DataTables that scrolls to the top of the table when the pagination links are clicked and I have followed the guide here:
http://jsfiddle.net/EjbEJ/
function paginateScroll() {
$('html, body').animate({
scrollTop: $(".dataTables_wrapper").offset().top
}, 100);
console.log('pagination button clicked');
$(".paginate_button").unbind('click', paginateScroll);
$(".paginate_button").bind('click', paginateScroll);
}
paginateScroll();
This works perfectly but unfortunately the page I have the DataTable on is loading in to an iframe and in an iframe it no longer works. Any idea how to get this script working in an iframe?
yes you must use postMessage to communicate with the iframe, and likely have your code in both places, so the parent frame can send a message to the frame, and then the frame can do the scroll animation.
https://davidwalsh.name/window-postmessage
just to let you know I resolved this issue. I just needed to add $(parent.document).find to get the html and body tags of the parent frame.
function paginateScroll() {
$(parent.document).find('html, body').animate({
scrollTop: $(".dataTables_wrapper").offset().top
}, 100);
//console.log('pagination button clicked');
$(".paginate_button").unbind('click', paginateScroll);
$(".paginate_button").bind('click', paginateScroll);
}
paginateScroll();
Cheers
When I apply this code and test this in Internet Explorer and FireFox, on click, the page does not scroll down with the toggle function, but it does scroll back up after closing the overlay. This works fine in Google Chrome, but not in IE 10 or Firefox. Please help. :)
$(document).ready(function(){
$(".PlaceHolders").click(function(e){
e.preventDefault();
$(".overlay").slideToggle(2000, function(){
$("#url_placeholder").text($(this).is(':visible') ? "Close Components" : "View Available Components");
});
$('html','body').animate({scrollTop: $(".PlaceHolders").offset().top}, 2000);
});
It's just your selector. See http://codepen.io/anon/pen/MYNZzW
$('html,body').animate({scrollTop: $(".PlaceHolders").offset().top}, 2000);
hope this is what you had wanted.
Here's a working fiddle, tested in chrome and ie10,
$(document).ready(function(){
$(".PlaceHolders").click(function(e){
$(".overlay").slideToggle("slow", function() {
setTimeout(function(){
$("#url_placeholder").text($(this).parent(".overlay").is(':visible') ? "Close Components" : "View Available Components");
},500);
});
$("html, body").animate({ scrollTop: $("#url_placeholder").offset().top }, 1000);
e.preventDefault();
});
});
http://jsfiddle.net/adhegde001/8uf9pvqw/1/
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 */
});
Having some problems with the jQuery .animate functionality.
I have implemented a 'Back to top' link on my website here: http://www.unforgivengamers.com/
It is supposed to get you back to the top of the page once you click it.
Here is my jQuery code:
<script type="text/javascript">
jQuery.noConflict();
jQuery('a[href=#top]').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
});
</script>
The problem: the animation is not smooth! I want it to scroll slowly, not instant.
Like this: http://designwoop.com/labs/smooth%20scroll/smooth-scroll.html
Am I missing something out here?
I'm using jQuery 1.8.3
You should put your code within document ready handler, the animation is not even performed on your page, the anchor is on the bottom of the page and your code without document ready on the top of the page.
jQuery(document).ready(function(){
jQuery('a[href=#top]').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
});
})