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;
});
Related
So, I have two pages, notifications and topic. Topic page has comments, every comment has an unique id. When user presses on the comment link in the notifications page it takes him to the topic page that is scrolled to the exact comment user pressed on. The link after that looks something like topic/titleoftopic#comment_627. It worked pretty good, but now, when I have added infinite scroll and started showing only first few comments (rest of it is loaded on the scroll to bottom) it won't scroll to the comment and I receive an error in the console Uncaught TypeError: Cannot read property 'top' of undefined, obviously this is because the comment is not loaded yet. Is there any way to make it work? I have an idea - start scrolling to the bottom until it finds the exact comment, but not sure how to implement this. Here is my code on how do I make it scroll:
//Scroll to the comment from notifications
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 800);
} else {
$('html, body').show();
}
});
Thanks everyone for any advice or suggestion!
For dynamically added items you have to find that id from whole document.
$(document).ready(function () {
$('html, body').hide();
if (window.location.hash) {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(document).find(window.location.hash).offset().top
}, 800);
} else {
$('html, body').show();
}
});
This JS creates a Smooth scroll, it works with jQuery 1.11.1, but break with jQuery 1.12.3. Using this with a Wordpress site and would prefer not to load two versions of jQuery.
Can't figure out what to update to make it work again.
<!--smooth scroll to anchors-->
<script>
(function($){
var jump=function(e){
if (e){
e.preventDefault(); //prevent the "normal" behavior which would be a "hard" jump
var mytarget = $(this).attr("href"); //get the target
}else{
var mytarget = location.hash; //sets the target to the anchor part of a URL
}
$('html,body').animate( //perform animated scrolling
{
scrollTop: $(mytarget).offset().top - 100 //get top-position of target-element and set it as scroll target and move down 100px for fixed nav
}, 1000,function(){ //scrolldelay: 2 seconds
location.hash = mytarget; //attach the hash (#jumptarget) to the pageurl
});
}
$('html, body').hide()
$(document).ready(function(){
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show()
jump()
}, 0);
}else{
$('html, body').show()
}
});
})(jQuery)
</script>
<!--End smooth scroll-->
jQuery 1.12.x does not like a[href^=#] without quotes around #.
It throws an unrecognized expression error.
Using quotes is recommended always.
$('a[href^="#"]').bind("click", jump);
Also there's an issue with your scrolltop in all jquery versions. $(..).offset() is null. This happens when your href is # or links to a non-existing id. You should also check that it's not an external link, and return, otherwise preventDefault will stop it from working.
See fiddle: https://jsfiddle.net/txau5yLf/
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/
I have a dead simple jQuery code responsible for navigation through website using animated scrolling.
jQuery(".main_menu li a").click(function() {
var href = jQuery(this).attr('href');
if(jQuery(this).html() == 'Home') {
jQuery("html, body").animate({ scrollTop: jQuery('body').offset().top }, 1000);
}
else {
jQuery("html, body").animate({ scrollTop: jQuery(href).offset().top }, 1000);
}
return false;
});
After making some unrelated changes in CSS and template the scrolling suddenly stopped working - now I can only scroll to top of the page by clicking "Home". Running the scrolling code in console doesn't work either. I tried to undo the changes I've made but it doesn't seem to help so I'm stuck here looking for the reason of this issue.
Here's the live version.
Problem here is All Section id's is getting duplicated. Section id's woda,oferta, o-firmie, galeria and kontakt.All section id's is getting duplicated double times in HTML markup. Please change their duplicated id's value for a section then it will working fine.
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/