I have a question that was answered before probably, but I was not able to make a code work.
I have an <a href="#page-contact">, and once the user click on it, it should scroll down (with animation) to a div with id "page-contact". It does take me to the form but with no animation
Here is the code:
<li class="">Contact</li>
<section id="page-contact" class="page-contact">
</section>
$('.page-contact').on('click', function(event) {
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#page-contact").offset().top
}, "slow");
}
});
Actually something really small..
$('.page-contact').on('click', function(event) {
//..
};
You connect this to a click on the target div, not the button.
Connect to event to a class that your button has and it will work.
$('#scrollButton').on('click', function(event) {
var target = $(this.hash);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, "slow");
}
});
Fiddle to try out: http://jsfiddle.net/Macavity/xeqmnoLL/2/
$(this.href) not valid selector so target variable always empty, change var target = $(this.href); to var target = this.href; to get link
$(this.href) seletor work as.
$("http://stackoverflow.com/questions/29515247/scrolling-to-a-div-using-jquery#29515468")
> Object[]
$('.page-contact').on('click', function(event) {
var target = this.href;
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#page-contact").offset().top
}, "slow");
}
});
Your selector is wrong, change to this:
$('a[href="#page-contact"]').on('click', function(event) {
var target = this.getAttribute("href");
if($(target).length) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#page-contact").offset().top
}, "slow");
}
});
One reason is href property returns the absolute path of the anchor, i.e. "http://www.example.com#hash". As jQuery can't find the target element the length of the collection is 0 and the if block is not executed.
Either use this.getAttribute('href') which returns the original href attribute or the hash property that returns hash segment of the href attribute instead of the href property.
var target = $(this.hash); // $('#page-contact')
Also note that your click handler is bound to the target section element not the a element.
$('li a').on('click', function(event) {
var target = $(this.hash);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, "slow");
}
});
Related
I have a auto scroll function, there is a static arrow which lets the user scroll to the next section of the page. When the user reaches the "contact" section (the last page), I would like the arrow to hide as there is no other page to scroll down to.
Update -
Currently the navigation arrow dissapears on the last page but it also dissapears on the about and intro sections too.. How can i fix
Jquery - Updated v3
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
function nextSection()
{
var scrollPos = $(document).scrollTop();
$('#section-navigator a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top > scrollPos) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
location.hash = "";
location.hash = currLink.attr("href");
if ($($anchor.attr('href')).attr('id') == "contact") {
$("div.page-scroll").hide();
}
return false;
}
});
}
HTML
<div class="page-scroll">
<img class="arrow-down page-scroll-btn" src="img/arrow_dark.png" onclick="nextSection()" />
</div>
Thanks!
By the looks of things you use the links as the id for the next selector so you should be using #contact in your if.
Also, you have closed the if bracket ) in the wrong place
if ($anchor.attr('href') == "#contact") {
}
If you want to compare it to the target divs id, then you need to do something like this:
if ($($anchor.attr('href')).attr('id') == "contact") {
$("div.page-scroll").hide();
}
But this would seem like extra processing to get the same result
Update
Given all your edits - none of them really helpful as they don't create an MCVE - and we seem to be moving further and further away from the original question. I would do the following:
Get rid of that jquery onclick binding function at the top of your jQuery as you are manually binding in the html, the change your next section function to:
function nextSection() {
var currentPos = $(document).scrollTop();
$('#section-navigator a').each(function() {
var currLinkHash = $(this).attr("href");
var refElement = $(currLinkHash);
if (refElement.offset().top > scrollPos) { // change this to offset
$('html, body').stop().animate({
scrollTop: refElement.offset().top // just use refElement
}, 1500, 'easeInOutExpo');
location.hash = "";
location.hash = currLinkHash;
if (refElement.attr('id') == "contact") { // hide the scroller if the id is contact
$("div.page-scroll").hide();
}
return false;
}
});
}
I am creating a navigation so that when I click on my a tag it scrolls to the element it's selected to. But how should I do it so that it animates when it goes
from:
Home
to:
<div id="Home">
<h2>HOME</h2>
</div>
I would like if it could be something with jquery.
Reference: Smooth Scrolling
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Feel free to change the speed of the animation, which is currently set to 1000ms (one second) to whichever value you like. Keep in mind that this code will affect all anchor tags which reference an element with a matching id on your HTML document.
You can do something like this with Jquery
$("a").click(function() {
$("html,body").animate({scrollTop: $("#home").offset().top});
});
You can do it like this:
JS Fiddle
var links = $('#links a');
links.on('click', function(e){
e.preventDefault();
var theHREF = $(this).attr('href'),
sectionTop = $(theHREF).offset().top;
$("html, body").stop().animate({scrollTop:sectionTop}, 500);
})
I am trying to create smooth scrolling to IDs. When I click on a link its ID should be scroll to top (at a certain point of top. Ex: 200px from top) of the page.
I tried it something like this:
var $root = $('html, body');
$('a[href*=#]').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: (($(href).offset().top >= 200 ) ? $(href).offset().top : 200)
}, 500, function () {
window.location.hash = href;
});
return false;
});
But it doesn't work and its always scrolling to top of the page.
Hope somebody may help me out.
I guess, the problem is your href, the target will presumably not be found. Maybe you'd be better off to store the element to scroll to in a data attribute, like so:
$('a[href*=#]').click(function(evt) {
evt.preventDefault();
var target = $(this).data('target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
With an anchor tag like so:
Brilliant rainbow colors
Obviously, the element with the ID somewhere_over_the_rainbow must exist somewhere in your DOM.
This should do the job correctly :
$('a[href*=#]').click(function() {
var href = $.attr(this, 'href');
var top = $(href).offset().top;
$('body').animate(
{
scrollTop: top - 200
},
500
);
return false;
});
Obviously, the item with the id equal to the hash of the anchor must exist.
Is there a way to add a class to any div that is being scrolled to by clicking an anchor?
I currently have this code but can only add the "animated swing" class to the #ecomm div..
Ideally any anchor on the page that I click on I not only want to scroll down to it but add an animation class..
My code so far:
<script>
$('a[href=#ecomm]').click(function(){
$("#ecomm").addClass( "animated swing" );
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
</script>
Should work for all anchor tags with # hrefs.
<script>
$('a[href^=#]').click(function () { // Use all anchor tags with an href that starts with #
var href = $(this).attr('href'); // Get the href for the clicked anchor.
$(href).addClass( "animated swing" ); // The href is the same as the id.
$('html, body').animate({
scrollTop: $(href).offset().top
}, 500);
return false;
});
</script>
Taking into account #rorypicko's comment, a data attribute could be added to ensure only # hrefs you require will use this functionality:
<a href="#ecomm" data-scroll-link>Text</a>
<script>
$('a[href^=#][data-scroll-link]').click(function () { // Use all anchor tags with an href that starts with # and the specified data attribute.
var href = $(this).attr('href'); // Get the href for the clicked anchor.
$(href).addClass( "animated swing" ); // The href is the same as the id.
$('html, body').animate({
scrollTop: $(href).offset().top
}, 500);
return false;
});
</script>
something like this:
<script>
var href
$('a').click(function(){
href = this.attr('href');
$('div').each(function(){
var thisDiv = this
if(this.attr('id') == href)
{
thisDiv.addClass( "animated swing" );
}
$('html, body').animate({
scrollTop: thisDiv.offset().top
}, 500);
});
return false;
});
</script>
Hope this works.
i have following function:
var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top
},2000,function()
{
location.hash = target;
});
}
$('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();
}
});
that permit to scroll to the specific div element
<div id="anchor_element">blabla</div>
if i click on link :
Scroll here
i want that function above work only if in html link i have included a specific rel attribute for example "myscroll":
Scroll here
how to modify function for work in this mode?
thanks
Try Attribute Equals Selector [name="value"]
$('a[href^=#][rel="myscroll"]').bind("click", jump);
Has Attribute Selector [name]
If you want it to work with all elements with rel attribute
$('a[href^=#][rel]').bind("click", jump);
Update
$('a[href^=#],a[rel="myscroll"]').bind("click", jump);
//^ works for both a start with # and with rel="myscroll"