I have a project where the logo will load in the center of the page when the user comes to the website. Then, if the user scrolls down, the logo will scroll to the top and the content will follow, but, the logo will become fixed on top once it reaches top of the window. So, what I want to do is, stop the content from going to the top (because that content goes behind the logo), e.g. #Furniture is the div, that goes to top when an anchor tag with href"#Furniture" is clicked. I want to stop the div containing #Furniture at 150px (logo's height) from top of the browser. Is that possible?
Following is the code that I have used for smooth scrolling of any div to the top:
$(window).load(function () {
var $root = $('html, body');
$('a').click(function () {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
});
Fiddle
Use like this:
var top_val = $(href).offset().top; // or anything your code for getting top value
$root.animate({
top: "+top_val+"
}, 500, function () {
window.location.hash = href;
});
Related
I'm using this function to scroll down the page from one element to another. Everything works fine, except that with this function, it scrolls to halfway down the div, instead of just scrolling to the top of the div. How can I fix this?
jQuery(document).ready(function () {
jQuery('.request-tour-scroll').click(function () {
jQuery("html, body").animate({ scrollTop: jQuery(document).height() }, 2000, function () {
jQuery('#show').focus();
});
jQuery('#tour-option-section').css('display', '');
return false;
});
});
Your scrollTop call needs to have the scroll position set to the top of the div you want to scroll to, not the height of the document.
jQuery("html, body").animate({ scrollTop: $('#tour-option-section').offset().top }, 2000, function () {
jQuery('#show').focus();
});
Codepen for example: https://codepen.io/jamiecalder/pen/LYYVqqX
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 am trying to automate a scroll of 750px once the user has scroll 1px
, but reached 750 that I would scroll back to normal and the effect start again only if I am at the top of the page .
jQuery.noConflict()(function ($){
$(window).scroll(function (event) {
var body = $("html, body");
var scroll = $(window).scrollTop();
body.stop().animate({scrollTop:750}, '1500');
});
});
This is my code , but continues to scroll automatically to 750px how can I stop the event and start it again only if im ot the top of the body ?
you just need to add an if around the animate call.
if(scroll == 0){
body.stop().animate({scrollTop:750}, '1500');
}
otherwise everytime you scroll it will call the animate and return to 750px position
As i understand it, you want the scroll event to be fired only when the top of page has been reached. So you could toggle a class on the body element:
$(window).on('scroll', function(event) {
var scroll = $(window).scrollTop();
var $body = $('body');
if ($body.hasClass('onTop')) {
$("html, body").animate({
scrollTop: 750
}, '1500');
}
$body.toggleClass('onTop', scroll === 0);
}).scroll(); // trigger it on load or set it directly in HTML markup: <body class="onTop">
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 the following problem. What I want is when the user clicks in the navigation bar on "Contact" it will link to the contact page. This is a single page. When you are on contact and then clicking at the bottom of the page on, for example "Over ons" it should be redirect to the homepage (single page) and stop at that section. This works, but when you come from another page, the current section is overlapped by the header.
The jQuery code will not use the offset of the header, only when you are navigation inside the index.html.
Is there a way to fix the issue, so the section will not be overlapped by the header?
Live example:
http://codepen.io/anon/pen/NqxxQd
jQuery code:
// An offset to push the content down from the top
var offset = $('#header').outerHeight();
$('#primary-navwrapper li:not(.prev-page, .next-page), .list-of-links li').find('a[href^="#"]').click(function(event) {
event.preventDefault();
$('#primary-navwrapper li a').removeClass("current");
$(this).addClass("current");
var anchorId = $(this).attr("href");
var target = $(anchorId).offset().top - offset;
$('html, body').animate({ scrollTop: target }, 500, function () {
window.location.hash = anchorId;
});
});
function setActiveListElements(event){
// Get the offset of the window from the top of page
var windowPos = $(window).scrollTop();
$('#primary-navwrapper li a[href^="#"]').each(function() {
var anchorId = $(this);
var target = $(anchorId.attr("href"));
var offsetTop = target.position().top - offset;
if (target.length > 0) {
if (target.position().top - offset <= windowPos && (target.position().top + target.height() + offset ) > windowPos) {
$('#primary-navwrapper li a').removeClass("current");
anchorId.addClass("current");
}
}
});
}
$(window).scroll(function() {
setActiveListElements();
//updateLocationHash();
});
Your code to scroll down to each section needs to be placed in it's own function called something sensible like FireActiveElement. Give it one parameter that sends through your anchorId string. Your click listener then needs to call that function.
So you have a function similar to:
function FireActiveElement(anchorId) {
var target = $(anchorId).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500, function () {
window.location.hash = anchorId;
});
}
Then, what you can do is something like this:
function CheckHash() {
if (window.location.hash) {
FireActiveElement(window.location.hash);
}
}
Then you'll need to add that function as a callback to your body fade in:
$('body').fadeIn(500, CheckHash);
Difficult to test this works myself, but hope that helps you.
P.S.
If you need to have more things that are fired upon page load, you might want to change the fadeIn slightly to something like:
$('body').fadeIn(500, function() {
CheckHash();
// Examples:
SomeOtherFunction();
FireMeOnPageLoad();
});