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.
.
Related
I've searched hours and finally found a light jQuery code which allows me to animate the click of an anchor link, but when I click on one link it animates down and then jump 100px to the top without animation because the hash is given to the url after the animation which leads to the default anchor link behavior when you click it.
I have a code sample for you with a little comment from me for a fix, or well I thought It'll be a fix...
// Scroll.js (https://css-tricks.com/snippets/jquery/smooth-
scrolling/#comment-1635851)
/*
* Scroll.js:
* 1. added -100 after the .top property which reflects the navigation height.
*/
$(document).ready(function(){
// Add smooth scrolling to all links
$('a').on('click', function(e) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
e.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top-100 // /* [1] */
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Just write on the anchor href attribute javascript::void(0) as in
Though if you want it to act as an anchor and have a url... this will not work :(
So I have a site, and on click I need it to show overlay div, plus scroll to certain div on that overlay div.
This is what I have:
$(".mcl-title").click(function() {
$("body").addClass("modal-on");
$(".overlay-container").show();
$('html,body').animate({scrollTop: $(".spm-mcl").offset().top}, 'slow');
});
So when the user clicks on .mcl-title, it shows the overlay-container, which covers the entire page, and I need it to move to .spm-mcl class in the middle of that overlay.
Any thoughts?
Your issue is that you are adding your event to a link. Default behaviour is to navigate to that anchor on the page which doesnt exist so you get the top of the page.
When you click:
<a class="item_download button_large news-title" href="#spm-mcl">See More</a>
It tries to navigate to an element with the ID spm-mcl. (You have not such element. You have an element with the class spm-mcl.
You need to call event.preventDefault(); to cancel the default link behaviour.
Also, you can greatly simplify your code and use just one event handler for all the links like this:
Working jsFiddle
<a class="item_download button_large news-title" data-scroll-target=".spm-mcl" href="#">See More</a>
$(document).on('click', '[data-scroll-target]', function(event) {
event.preventDefault(); // stop default link navigation
var $this=$(this); // the clicked button
var target=$this.data('scroll-target');
$("body").addClass("modal-on");
$(".overlay-container").show();
$('html,body').animate({
scrollTop: $(target).offset().top},
'slow');
});
I searched around net and tried many things but scrollTop is scrolling randomly.
I want to scroll within a div when clicked on links.
My div:
<div id="test" style="height:400px; overflow-y: auto;">
<img src="basjhdba1.jpg" id="item_1">
//longtext here
<img src="basjhdba2.jpg" id="item_2">
//longtext here
<img src="basjhdba3.jpg" id="item_3">
//longtext here
</div>
Three links:
Item 1
Item 2
Item 3
The onclick method:
changeItemDisplay: function(a)
{
var target = "#item_"+a;
$("#dishesresults").stop().animate({scrollTop: ($(target).position().top)+"px"}, 800);
}
This is not working correctly, but they have some pattern there for scrolling. Even if I click one link twice consecutively then also it is moving every time.
Don't know what is causing this.
Your div is scrolling randomly, because you don't check its position.
You need to know number of pixels that are hidden from view above the scrollable area (scrollTop) and current position of the $('#test') relative to the document (offset).
As a side note: better idea is to use jQuery's .click() method instead of binding event handler with onclick event attribute, and this is why.
JSFiddle (used Bram Vanroy template)
Item 1
Item 2
Item 3
<script>
$(function () {
$('.changeItem').click(function (e) {
e.preventDefault();
var target = $(this).attr('href');
$('#test').stop().animate({
scrollTop: $('#test').scrollTop() - $('#test').offset().top + $(target).offset().top
}, 800);
});
});
</script>
I'm currently working on a site which uses the javascript code below to animate over to the target element inside an href. How would I go about getting the code to animate when the back/forward buttons are clicked based on it's history.
/* ------ Smooth Scroll ----- */
$(document).ready(function() {
"use strict";
$('a[href*=#]').bind('click', function(e) {
e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump
var target = $(this).attr("href"); //Get the target
// perform animated scrolling by getting top-position of target-element and set it as scroll target
$('html, body').stop().animate({ scrollTop: $(target).offset().top}, 2000, function()
{
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
You need to listen for the hash change. There are many ways to do this. You can poll for hash change or use HTML5's history api with onhashchange method to listen for changes. The easiest way to do this is probably using some kind of library that already takes care of both. I recommend jquery plugin if you are using jquery. If you are using angular js or other stuff then look for those plugins.
You would do something like
$(window).hashchange( function(){
// Do the animation here
})
You would no longer need to animate on a click.
This one may be simple for the jQuery/JavaScript gurus here, but I just can't find a solution for it around the web.
Case
I have a link at the bottom of a page that says Back to Top, the link is simply a target link like this:
Back to Top
So when you click it, it jumps to the top of page. Simple.
Problem
When the target link is clicked, the id #top is added to the URL of the page, ie:
http://website.com/about-us/#top
Question
Is there a way to remove or avoid getting that id #top added to the URL of the page but retain the functionality of the page jumping to the top?
Any help with this is greatly appreciated.
In either case (jQuery or vanilla JavaScript), you'll want to do the following:
Select all anchor tags where href is set to #top
Create a "jump" function which sets the page position to the top and returns false to prevent the default link behavior
Bind the "jump" function to the click event of all of the nodes found
To jump you have several options. I've provided them (jQuery and JS specific) in the first example below.
Using jQuery
jQuery makes selecting and binding to a click event easy. Then you can jump to the top of the page using jQuery or straight JavaScript.
$('a[href="#top"]').click(function() {
//
// To jump, pick one...
//
// Vanilla JS Jump
window.scroll(0,0)
// Another Vanilla JS Jump
window.scrollTo(0,0)
// jQuery Jump
$('html,body').scrollTop(0);
// Fancy jQuery Animated Scrolling
$('html,body').animate({ scrollTop: 0 }, 'slow');
//
// ...then prevent the default behavior by returning false.
//
return false;
});
jQuery's animate provides options for animation duration and easing along with the ability to set a callback.
Vanilla JavaScript
You can also use Vanilla JS the whole way through... Querying and binding, however, become a bit more painful.
Modern browsers support document.querySelectorAll() which will allow you to grab all of the link elements just as you would with jQuery:
var links = document.querySelectorAll('a[href="#top"]');
Then loop over the elements and bind the "jump":
for (var i = links.length - 1; i >= 0; i--) {
links[i].onclick = function() { window.scroll(); return false; };
};
If your target browser doesn't gift you with querySelectorAll you just loop through all of the anchor tags to find the ones linked to #top:
var links = document.body.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--) {
var l = links[i];
if(l.getAttribute('href') === '#top') {
l.onclick = function() { window.scroll(); return false; }
}
}
$('a[href=#top]').click(function(){
$(window).scrollTop(0);
return false;
});
You need to stop the tag a's default event to trigger.
When handling anchor click events, always use e.preventDefault(); On Click of Anchor element. When you don't need anchor element.
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 'slow');
This will work
$('a.standard').click(function() {
$('body,html').animate({
scrollTop: 0
});
});