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/
Related
I have always used this jQuery script for smooth scrolling:
var root = $('html, body');
$('a[href^="#"]').click(function() {
root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
return false;
});
How can I do this with vanilla JavaScript? I have tried this:
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
But it doesn't work with Safari, which is a deal breaker for me.
As you can read on the docs safari doesn't support options parameters on scrollIntoView so you'll need to find another method. I suggest taking a look at this alternative.
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'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/
I'm attempting to have a smooth scroll feature that uses div id="" but instead of scrolling it snaps to the element.
http://jsfiddle.net/T6F6v/
$(document).ready(function() {
$('a[href*=#]').bind("click", function(e) {
var target = $(this).attr("href"); //Get the target
var scrollToPosition = $(target).offset().top;
$('html').animate({ 'scrollTop': scrollToPosition }, 500, function(target){
window.location.hash = target;
});
e.preventDefault();
});
Am I missing something?
$(document).ready(function() { is missing the closing }). That's all.
Edit: as the conversation on Calamari's answer suggests, $('html,body').animate({... is necessary for cross-browser compatibility. Firefox and IE only respond to html, while Chrome only responds to body.
Besides of that you miss a closing }); you should write $('html,body').animate(..., instead of only writing $('html').animate(.... That should do the trick.
I'm having troubles in getting my one-page-layout anchor-links working in Internet Explorer.
I'm using jQuery with the Easing plugin to go to an anchor on my webpage, this works in Chrome, and when I tested it out in Internet Explorer (9), this happened:
Internet Explorer gave a warning on the bottom of the page that an ActiveX-element needs to be enabled, when I click on one of my links then, I get taken to the anchor, but without the animation (and it also comes up wrong, as I'm using a fixed header).
When I activate the ActiveX-element, nothing happens at all when I click on the link.
This is my code:
<script>
$(function(){
$('ul.nav a, .top-logo a').bind('click',function(event){
var $anchor = $(this);
var $section = $($anchor.attr('href'));
if(!$section.length){ return }
$('body').stop().animate({
scrollTop: $section.offset().top-139
}, 1500,'easeInOutExpo');
event.preventDefault();
})
})
</script>
Could anyone help me out with this?
Cheers!