I want to be able to smooth scroll to a specific div using its id but my current script isn't correct. Can anyone see where my error is?
Here is my fiddle for reference here.
<script>
$(document).ready(function() {
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 5000);
return false;
});
});
</script>
Thanks.
no need to add script tag in jsfiddle. Try with this fiddle. http://jsfiddle.net/wn6rv94t/1/
Removed<script></script>
Related
I'm using the scrollTo plugin by Ariel Flesler to scroll to an element. However this piece of code just doesn't run on Firefox (v 61).
$(document).ready(function(){
$('html, body').scrollTo(document.getElementById('login-link'), 800);
});
Here's a demo: https://jsfiddle.net/1n26s3dm/1/
Any idea what am I doing wrong?
Add the following code and make sure you have jQuery installed, because on your fiddle there isn't jquery
$('html, body').animate({
scrollTop: $("#login-link").offset().top
}, 800, function(){
// this is the callback after the animation is done
// you can emit events here
$("#login-link").trigger('click');
});
Your example on jsfiddle doesn't work. If you need jQuery you should select this library in JS window. Do not use Resources for include jQuery.
Try my example
Also try do not mix jQuery and Vanilla.js to work with DOM. Would be better if you change your code like this:
$(document).ready(function(){
$('html, body').scrollTo($('#login-link'), 800);
});
I am using jQuery to create a smooth animation from a link to a div.
$("#link").click(function() {
$('html, body').animate({
scrollTop: $("#portfolio").offset().top
}, 1000);
});
Since I am using this more than a couple times, I don't want to hard-code in the ids for each element. How could I automatically put the id in the stop that says "#link", and put the href ("#portfolio") of that id into the portfolio spot.
I would add a common class (instead of individual id's) to each element to which you want to have this click event attached. Then you could do something along the lines of:
$('.click-event-class').click(function() {
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top
}, 1000);
});
I have a navigation bar that when clicked, the page will be scrolled into that part of the page. I used this script.
$('li a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
How do I change this element's style so that when it is clicked, it will slide into a certain part of the page as well as that navbar will have a different background image?
I tried adding an onclick() function in the links. It works but it does not scroll into the section of the page where it is suppose to slide. I tried adding the script inside the sliding script hoping it may have an effect but it does not work.
You can add this into that function.
$('li a').click(function(){
var el = $(this);
$('li a').removeClass('selected');
el.addClass('selected');
$('html, body').animate({
scrollTop: $( el.attr('href') ).offset().top
}, 500);
return false;
});
Remove the "selected" class from any li then add it to the currently clicked one.
you can use the $(element).css(cssElement, value) to change the CSS.
Example:
$("#myDiv").click(function(){
$(this).css("background-color", "Black");
});
I have a portion of jQuery that just doesn't seem to be working correctly. I have a link to click, [show/hide] which should slideToggle a div. At the same time, I want to animate it so that the page scrolls to the top of the div. It works when I put the animate function inside the slideToggle function, like in this jfiddle.
However, this means that the div i want slides out, and then the page scrolls down. id like to set it up so that both happen simultatneously, which I tried to do in this jfiddle but it simply doesn't work. I also tried doing the scroll animation first, then the slideToggle, which didn't work - is there a way to implement this also?? Cheers!
$(document).ready(function () {
$('.click_to_hide').click(function () {
var visible = $('.hide_on_click').is(":visible");
$('.hide_on_click').slideToggle(500);
if (!visible) {
$('html, body').animate({
scrollTop: $('.hide_on_click').offset().top
}, 500);
}
});
});
http://fiddle.jshell.net/YFR2e/3/
$(document).ready(function () {
$('.click_to_hide').click(function () {
$('.hide_on_click').slideToggle(500);
if($('.hide_on_click').is(':visible')){
$('html, body').animate({
scrollTop: $('.hide_on_click').offset().top
}, 500);
}
});
});
try to put it in the same function
When I call $("body").animate({scrollTop: someValue}); I want $(window).scroll(function() { }); to be called too. How can I achieve that?
I have tried with $(window).trigger("scroll") and $(window).triggerHandler("scroll") without success.
The code
EDIT:
Problem solved. There was an if in my $(window).scroll(function() { }); that caused the problem.
Just use:
// Trigger the scroll event
$(window).scroll();
Source:
http://www.w3schools.com/jquery/event_scroll.asp
https://api.jquery.com/scroll/
Apply it to both body and html as it is not consistent.. (for example, FF uses the html for scrolling while chrome uses the body)
$("html, body").animate({scrollTop: someValue});
demo at http://jsfiddle.net/vzyVh/
You can try below code - here i am scrolling to top of my div tag which has id "one".
$('html,body').animate({ scrollTop: $('#one').offset().top }, 'slow');