I have the following code to smoothly scroll between links on a single page:
$(".navbar .nav a").bind('click',function(event){
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top - (90) + "px"
}, {
duration: 1200,
easing: "easeInOutExpo"
});
return false;
event.preventDefault();
});
This works fine when the links are clicked on the same page. However, when they are linked to exernally:
The offset doesn't apply; and
The page doesn't scroll.
I would like to fix this by navigating to the new page, starting at the top and then scrolling down to the anchor. How can I achieve this?
Related
I have this code which is supposed to smooth scroll to an anchor on the page whenever an tag is clicked. However, this code does not scroll smoothly but instead jumps to the div.
$('a[href*="#"]:not([href="#"])').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
I have this piece of jquery to scroll the page up to the top. It's not scrolling at all.
I've tested it using an alert() and it is triggering - so why isn't it scrolling to the top?
$(document).on("click",'.campaign-stats', function(event) {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Please note that the page does contain content inserted using AJAX, but I don't see how that would stop it scrolling to the top?
This is pretty simple question I think for those who knows javascript/jquery good. I am pretty new to all this and couldn't make it. I found code that is calculating the offset of navbar that looks like this:
var offset = 50;
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
And here is the fiddle example of what I have so far. As you can see if you click link in navbar it just skips to section. Where in this script to add easing so it scroll down a bit smoother?
With original code I found first I had that smooth scroll but with new script is lost. This is the old code:
$(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();
});
});
Plavookac Hi there.
I have set up a working sample here in this Fiddle for you.
When you place this code in your page, place it below all of you other js script links. or if you put this in a script link, place the link at the end.
I take it that you would already have the jquery link .
Have a look at this code here, you will see the smooth scrolling and the offset.
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: "#navbar"});
// Add smooth scrolling on all links inside the navbar
$("#navbar a").on('click', function(event) {
// 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 - 60
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
});
Notice this line of code... event.preventDefault(); this is used to prevent that flicker when first clicked to start the scrolling.
This part of the code will handle the smooth scroll.
// 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 - 60
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
Does this help?
to keep scroll bar always at the bottom of the page i used
$(document).ready(function() {
$(function() {
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
});
});
It is working in the Firefox but it is not working in the chrome.
Why it is not working in the chrome can anybody suggest me the good solution to keep the scroll bar always at the bottom of the page.
Thanks for any help
If you want to move back to the bottom of the page even if the user attempts to scroll up, you are going to need to call your function on an interval.
$(document).ready(function() {
function scrollBottom(){
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
}
setInterval(scrollBottom, 500);
});
You can play with the interval to get the desired amount of UI interactivity.
Alternatively, you could bind to the scroll event, this will fire whenever the user scrolls.
$(document).ready(function() {
$(window).scroll(function(){
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
});
});
I am using the following to scroll to an element
$("html, body").animate({
scrollTop: $('selector').offset().top
}, 500);
The above code places the element at the top of the browser window when scrolled to it, is there a way I can scroll to the element with the scroll ending with the element at the bottom of the browser window?
Try something like this to put the scroll at the bottom of the element
$("html, body").animate({
scrollTop: $('selector').offset().top + $('selector').outerHeight(true)
}, 500);
Or this to put the element at the bottom of the scroll:
$("html, body").animate({
scrollTop: $('selector').offset().top + $('selector').outerHeight(true) -$(window).height()
}, 500);
You could use the height of the window to calculate your scroll position