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");
});
Related
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 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>
This is my code: Js Fiddle
As you can see I have several sections on top of each other with 100% height. I want to know how I can get it so when the user clicks on "learn more" they scroll to the next section, so the top of the section is at the top of the page.
Normally it would be quite simple as I could do this:
$('body').animate({
scrollTop:$(document).height()
});
However this won't work if the user has already scrolled halfway down on of the sections and then hits the button. It would also be good if I could use the same function for each button press, instead of having three different functions, one for each different section.
I guess the code would be something like (in pseudo): scroll to top sectiona + 1
with jQuery and smooth scrolling
$('a').click(function(){
var nextSection = $(this).closest('section').next('section');
$('html, body').animate({
scrollTop: $(nextSection).offset().top
}, 2000);
});
Why not you pass id's to each section and in href refer to that id like
<section id="sectionOne">
Move to section two
</section>
<section id="sectionTwo">
Move to section one
</section>
You can also try the following.
var amount_to_scroll_by = $(document).scrollTop() + element_to_scroll.getBoundingClientRect().top);
$(document).scrollTop(amount_to_scroll_by); // animate this scroll
Hope this helps :)
Using jquery, you can smoothly scroll to the target.
Here is a SAMPLE
JS:
$("a").click(function(e) {
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({ scrollTop : $(target).offset().top + "px"});
});
You should first fix up your anchors and use the hash fragments to allow for native navigation between anchors.
I have created a very simple demo for you to understand this (not using your markup to keep it simple).
Demo: http://jsfiddle.net/abhitalks/9uxGq/15/
(another demo with your markup: http://jsfiddle.net/abhitalks/9uxGq/19/)
You need two anchors, one as click link and the other to mark the position of target as anchor.
For example:
<div>
<a id="LearnMore1"></a> <!-- Used for marking the anchor with hash fragment -->
<h2>Sub Heading 2</h2>
<p>
Some text content here
</p>
Learn More <!-- Used to click to got to next anchor -->
</div>
Note: Of course instead of using a second anchor as a marker, you could use the div (or in your case section) with an id. But, an a is better because it is more semantic for content navigation and it means an anchor.
Once done, this becomes a fallback for you. Now you can easily implement animations using jQuery etc.
It would be as simple as this:
// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) {
e.preventDefault(); // prevent the default behaviour
var nextAnchor = this.hash.replace("#", ""); // get the next marker anchor
var gotoPoint = $("#" + nextAnchor).position().top; // get the position of marker
$('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});
Alternatively:
// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) {
e.preventDefault(); // prevent the default behaviour
var nextAnchor = $(this).attr('href'); // get the next marker anchor
var gotoPoint = $(nextAnchor).position().top; // get the position of marker
$('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});
Now applying this to your use case, the demo becomes: http://jsfiddle.net/abhitalks/9uxGq/19/
Hope that helps, and you can work it out in your markup and use-case.
.
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');