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.
Related
I have a few links on my sidebar on my website. The links have the class sidebarelement. Everytime I click one of them I have to click twice to scroll to my content. After the first time nothing happens. I use jQuery.
$(".sidebarelement").on("click", function () {
var offset = $(':target').offset();
if (offset) {
var scrollto = offset.top - 158; // minus fixed header height
$('html, body').animate({scrollTop: scrollto});
}
});
How can I fix this?
For everyone else who had this problem I got a solution.
The idea is to get the href attribute from the link which has been clicked and animate (scroll) to that place. Also note that e.preventDefault() prevents the link to jump to his place.
Here is my code snippet.
$(document).ready(function () {
$('.sidebarelement').on("click", function () {
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top - document.getElementById('navDiv').clientHeight // minus fixed header height
}, 'slow');
e.preventDefault();
});
});
I have seen this problem on stackoverflow but the code that was used in there was different and I didn't really understood it. So I want to make website scroll to div when website is coming from another page.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.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 -70
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
This code works in homepage, scrolls smooth, but it does not work when it's clicked from another page.
This will scroll the body to the #someDiv top offset when page is loaded:
$(document).ready(function(){
$('html, body').animate({
scrollTop: $('#someDiv').offset().top - 70
}, 800);
});
and this if the referrer is not http://www.example.com:
$(document).ready(function(){
if (document.referrer !== "http://www.example.com") {
$('html, body').animate({
scrollTop: $('#someDiv').offset().top - 70
}, 800);
}
});
and this when comes from other page:
$(document).ready(function(){
if(document.referrer != '' && document.referrer != location.href ){
$('html, body').animate({
scrollTop: $('#someDiv').offset().top - 70
}, 800);
}
});
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 need to create smooth scroll to IDs using jQuery.
Here is my code:
var $root = $('html, body');
$('a[href*=#]').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
Its working fine for me. But one thing, I need to stop scrolling at a certain point of the top of the page. For example 200px from the top.
At this stage its always scrolling to top of the page.
Can anybody tell me how to modify this code?
Thank you.
by adding this:
(($(href).offset().top >= 200 ) ? $(href).offset().top : 200)
It checks how far the element is away from the top, if its more than 200px it will scroll to it else it will scroll to 200px from the top
here is the new code:
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;
});
If i understood you correctly, you have something like header with height for example 200px and position:fixed to top. And your current script is scrolling too high, hiding hash title under the header.
So if this correct you just need to subtract header height from $(href).offset().top (e.g. scrollTop: $(href).offset().top-200)
jsFiddle
Change this line scrollTop: $(href).offset().top to scrollTop: $("body").offset().top + 200
This will take the really top position (0) and then you can manipulate your scrolling for position you need
I have a link and an element on the same page:
Click
<div id="#about-us"></div>
And the following javascript:
var scrollto = window.location.hash;
if (window.location.hash != null && window.location.hash != '') {
$('html, body').animate({
scrollTop: $(scrollto).offset().top
}, 500);
}
This should animate a scroll to #about-us element,but it doesn't , it goes straight to element without animation,probably because the hash condition is not met,though there is a hash in url,because the hash is changed after the function.
I need a way to auto scroll to that element with animation,when you click the link . As example,if this page is index.php , and you want to go from another-page.php to index.php , straight to that element, it should load the page,and then scroll to the element,same if you are on index.php but at the top of the page and you click on the link,it should scroll down to the element.
The only problem is when you are on the same page.It doesn't pass the condition,so the animation doesn't work.
UPDATE I've changed the code a little bit.Now the condition is meet,but the animation doesn't work..
$('#link').click(function(e) {
window.location.href='index.php#about-us';
var scrollto = window.location.hash;
if (window.location.hash != null && window.location.hash != '') {
alert(scrollto);
$('html, body').animate({
scrollTop: $(scrollto).offset().top
}, 500);
}
});
This is because window.location.hash is not defined by the time you click on the link and the event handler is called.
Try using:
jQuery(function($) {
$('#link').on('click', function(e) {
e.preventDefault();
var scrollTo = $(this).attr('href'); // retrieve the hash using .attr()
if (scrollTo != null && scrollTo != '') {
$('html, body').animate({
scrollTop: $(scrollTo).offset().top
}, 500);
}
});
});
Also, change your HTML code with:
<div id="about-us"></div> <!-- no need for prepending id value with # -->
See this working JSFiddle
If you want to bind the event on page load, use:
$(document).on('load', function(e) { /* the codez */ });
And retrieve the location hash with var scrollTo = window.location.hash; that will be defined when the page loads.
This code works for me
HTML for same page scroll
Click for About us
<div id="about-us"></div>
HTML for external page link
Click for product introduction
HTML for external page scroll
<div id="introduction"></div>
jQuery
if(window.location.hash){
var getUrlAfterHash = window.location.hash;
if($(getUrlAfterHash).length > 0){
$('html, body').animate({ scrollTop : 0 });
scrollToTop();
}
}
$('.link').on('click', function(e){
e.preventDefault();
var getUrlAfterHash = $(this).attr('href');
scrollToTop();
});
function scrollToTop(){
var idPositionHeight = $(getUrlAfterHash).offset();
$('html, body').animate({ scrollTop : idPositionHeight.top}, 800);
}