I have this code for sliding down to each section on the page. The nav link has an id which links to the corresponding class. This works perfectly except if you click a nav button and then quicky click another it will continue to play out the animation. This isn't too bad.. but if you're mashing the buttons it really freaks out.
I tried using .stop(); but as expected, this stops the animation all together and jumps to the section. Ideally I wish it to go to stop animating wherever it is and continue to the selected section.
I have NO idea how to do this, so jQuery wizards please help!
JSFiddle
$('.nav-item').on('click',function(e){
var scrollSpeed = 1000;
var scrollTop = $(window).scrollTop();
var id = $(this).attr('id');
var goTo = $('div.'+ id).offset().top;
e.preventDefault();
$("html, body").animate({ scrollTop: goTo }, scrollSpeed);
});
just use stop as you have said before
$("html, body").stop().animate({ scrollTop: goTo },
http://jsfiddle.net/XRGkd/
Related
I was trying to make a "Click to Scroll" menu on my website (www.trianglesquad.com). I tried a code from
w3schools.com "https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll". I am facing a problem. It doesn't scroll to perfect point. For Example, If I click on "Portfolio", It scrolls to the mid of portfolio section. It scroll to perfect point after 3-4 Clicks.
Any Help will be highly appreciated :)
Thanks.
Not sure why all the down votes, as we all were beginners at some stage... Maybe for future posts, try creating a JS fiddle with an example and be more specific.
You can change the scrolling offset by adding or subtracting from the offset as per below example:
$(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 -200
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
The key take away here is this line:
scrollTop: $(hash).offset().top -200
You can add or subtract any amount of pixels that you choose.
Edit:
Actually try this code instead:
$(document).ready(function() {
$("#xp-navigation").find("a[href*=#]:not([href=#])").click(function () {
var offset = 0;
var speed = 1000;
var target = $(this.hash);
$("html,body").animate({
scrollTop: target.offset().top - offset
}, speed);
});
});
It is a bit cleaner and you can also adjust the offset.
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?
The context: I have a one page web app. So there's lots of div's being hidden at any one time (I'm not sure if this matters). What I am finding is that when a user is finished with one page (Page X), then they click back (to Page Y) - if they return back to Page X then the position is the same as when they left the page. The back button is at the bottom, so that's where the user ends up again.
What I want, is when they return to Page X for them to be at the top of the page so they can start again. Whether it scrolls back or just jumps back - either way is fine.
I've tried all of the following with no success:
// Scroll to top
setTimeout(function(){
alert('scroll');
$('html, body').animate({scrollTop : 0}, 2000);
}, 2000);
Adding a div with the id top-anchor at the top and using:
$('html, body').animate({
scrollTop: $("#top-anchor").offset().top
}, 2000);
Having a and using an anchor, with the code below (it only works once though, after that as the hash is already in the URL it no longer works I suppose):
document.hash = '#top-anchor';
Also tried:
window.scrollTo(0, 0);
No luck.
Any alternative ideas are much appreciated.
You can achieve something like that: DEMO : https://jsfiddle.net/yeyene/bpwtLg1w/1/
Not sure how your content divs are shown and hidden, but just get the idea of adding scroll to top of page div part.
Add scroll event on Back button click event, since you already known which page to go, you can scroll to this page's top, by using...
$(element).position().top
JQUERY
$(document).ready(function () {
$('input[type=button]').on('click', function(){
getPageID = $(this).attr('id');
$('.page').hide(0);
$('div#'+getPageID).show(0);
$('html,body').animate({
scrollTop: $('div#'+getPageID).position().top - 10
}, 500);
});
});
I have seen some website has this: they have only one page (actually they have some pages, but only show one at one time) on their homepage, which means they have no vertical scroll bar, but when you put your fingers scroll up and down on the touchpad, the homepage will scroll up or down smoothly,show some different contents.
Just like you have a slide, but the slide go up and down, not left or right.
Sample link: http://tangyan.maxinrui.com/
Can somebody show me how to did this, maybe using Bootstrap? Or give me a sample page.
Thanks in advance.
You can make it with buttons, I don't know if you want that.
Make a file called extra.js
put the following code in it:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
on the pages the extra.js is loaded all anchor links will scroll.
(Anchor link is just a link with 'id="one"' 'href="#one"')
I think when you want to make it scroll when the user scrolls you could hook this up to some javascript.
I have a accordion menu with very lengthy content. So I need to implement slide effect when accordion content is opened up.
Currently if you open up the first two menu items then the last item shows up the content below the viewport so I need to have the slide up effect for the accordion menu items.
Here is my code
$(document).ready(function () {
//Accordion
$(".menu_body").hide();
//toggle the componenet with class menu_body
$(".menu_head").click(function(){
$(this).next(".menu_body").slideToggle(400);
var plusmin;
plusmin = $(this).children(".plusminus").text();
$(this).children("span.down-arrow").toggleClass("up-arrow");
});
});
DEMO
Explanation:
See there will be N number of accordion menu items with very long table data. And it should allow us to open multiple tabs open up.
Currently it is working fine but the problem is when u click on the menu item which is in the bottom of the page, it is showing up the content down so you wont be able to see it unless you scroll down manually.
This is why I need menu to auto slide scroll to the top of the browser so that content will be seen at a single glance.
I would calculate the clicked button offset and scroll the whole page to that position
minus some amount of pixels (100) just for beauty:
DEMO
$(function () {
//Accordion
$(".menu_body").hide();
//toggle the componenet with class menu_body
$(".menu_head").click(function(){
var thisPOsTop = $(this).offset().top - 100;
$(this).next(".menu_body").slideToggle(400);
var plusmin = $(this).find(".plusminus").text();
$(this).find("span.down-arrow").toggleClass("up-arrow");
$('html, body').stop().animate({scrollTop: thisPOsTop});
});
});
How about trying to auto scroll to the specific element? This 'method' could fire whenever you select an accordian element.
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
The code above will complete the animation in 2 seconds (2000 ms), but you could change that to anything.
This JS Bin seems like exactly what you are looking for.
$('.menu_head').click(function() {
$('html, body').animate( { scrollTop:$(this).offset().top }, 400);
});
Here is my updated jsbin which works fine.
code as below:
$(".menu_head").click(function(){
$(this).next(".menu_body").slideToggle(400);
var plusmin;
plusmin = $(this).children(".plusminus").text();
$(this).children("span.down-arrow").toggleClass("up-arrow");
var scrollvalue = $(this).offset().top;
console.log(scrollvalue);
setTimeout(function(){
$(window).scrollTop( scrollvalue );
},500);
});