We Keep Coding

jQuery Links have to be clicked twice to scroll

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();
});
});

Smooth scrolling nor working when element is dynamically wrapped with anchor

For the mobile devices I want to convert all the h1 headings to anchors that can scroll smoothly to their target. To achieve that, when a certain device resize occurs, i just wrap the content of the h1 tag with an a tag and then unwrap the content of the a tag when the device comes back to desktop width.
$(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
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
//the function to convert the heading to an anchor for devices smaller than 780px
function makeResponsive() {
if ($(window).width() < 780) {
if ($('a').length) {
return true;
} else {
$('h1').each(function() {
$(this).contents().eq(0).wrap('');
});
}
} else {
$('a').contents().unwrap();
}
}
//run on document load and on window resize
$(document).ready(function() {
//on load
makeResponsive()
//on resize
$(window).resize(function() {
makeResponsive();
});
});
body,
html,
.main {
height: 100%;
}
section {
min-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
The Heading
</h1>
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
The problem is that when the h1 content is converted to an anchor, the smooth scrolling is not happening at all and the anchor just jumps to the target.

Your a-Tag doesn´t get the click event, because you add the listener when it doesn´t exist.
Try this
$(document).on('click', 'a', function(event) {...

Instead of wrapping it in anchors, just add 'mobile-anchor' class to those headings. Then, instead of listening for clicks on anchor, listen for clicks on 'mobile-anchor' and change:
$('html, body').animate({
scrollTop: $('#section2').offset().top
}, 800, function() {
Or even a simpler solution - before the very end of your on click function, add a 'return false;' so the browser doesn't scroll the page down by itself.
EDIT: Also, wrap everything in a single documentReady function and execute the makeResponsive() before adding a click listener.

scroll to elements up and down in jquery

i want to do scroll to an element as whatsapp search
when user clicked search (here it is bottom) should scroll to last element
ie; element with id chat-7.
and when click up button should scroll to chat-6 then chat-5 ..and so on.
if click down button it should scroll to down if it is not last item.
function scroll(id){
console.log(id);
$(".container").animate(
{
scrollTop: $("#"+id).offset().top
},
"fast"
);
}
full code here
http://jsfiddle.net/p3kar5bb/231/
unfortunately this code is not working properly

Because your div .container doesn't have scroll bar so you can do two things.
1. Animate Body
$("body").animate({ scrollTop: $("#"+id).parent('.item').offset().top}, "fast");
Demo
2. Set max-height to div
.container{
height: 100%;
overflow-y: scroll;
max-height:200px;
}
Demo

Perform the animate on the body instead of the .container
function scroll(id){
console.log(id);
$("body").animate({ scrollTop: $("#"+id).offset().top}, "fast");
}
Also set the
var pointedPosition=0;
Fiddle http://jsfiddle.net/p3kar5bb/234/

$('html, body').animate({
scrollTop: $("#"+id).offset().top
}, 500);
Code that is given in http://jsfiddle.net/p3kar5bb/231/ is fine, just change the animate() as above.
Just tried – $('html') does not work in Chrome and $('body') does not work in Firefox, so $('html, body') is needed. And also calling .stop() is a good thing.

Assuming you have the element id from buttons click event , try to change the scroll function code to this:
function scroll(id){
$('html, body').animate({
scrollTop: $("#"+id).offset().top
}, 2000);
}
And I have update your code here http://jsfiddle.net/p3kar5bb/231/.

Animate on scroll function mess up on using touch countrols of mobile view

Animation on scroll function is working fine on desktop view but it mess up the scrolling and scroll to random sections when I switch to mobile view and uses touch to scroll the screen. This is my animate on scroll function :
$(window).scroll(function() {
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
});
If I use the windows on scroll function, it mess up the mobile view. Please help to solve this issue so that animate on scroll can work on both mobile view with touch scroll and desktop view without messing the scroll.
For more Information these are the other scroll events:
(function($) {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 54)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '#mainNav',
offset: 80
});
// Closes the Responsive Menu on Menu Item Click
$('#navbarResponsive>ul>li>a').click(function() {
$('#navbarResponsive').collapse('hide');
});
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
});
})(jQuery); // End of use strict

EDIT
Since this is the same function for both events...
Maybe calling it on the same handler and use an or to trigger only once will do the trick.
$(window).on("touchmove scroll", function(e) {
// Do the function on ONLY ONE of the two event.
if(e.type=="touchmove" || e.type=="scroll"){
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').not(".triggered").addClass("triggered").animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
}
});
EDIT
I've added a subtility using a triggered class.
.not(".triggered").addClass("triggered")
One the first iteration of the .each() function, none of the skillbar-bar has the trigered class.
So let's add it! Then trigger the animation.
On the second and all next iterations, the triggered class removes all skillbar-bar which already have the triggered class out of the collection.
This prevent the animate() function to be fired more than once on each skillbar-bar.
I think this was the issue.
Let me know if it works !

Click few times on button makes the page is blocked

When You click on button, page should scroll down, to div with id="myTarget".
here is my HTML:
<button class="go"> GO </button>
<div id="myTarget">
<p>
la lalal lalala lalala
</p>
</div>
and jquery:
$(function() {
$(".go").on('click', function(event) {
event.stopPropagation();
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000);
});
});
My problem is that when you click a few times on button, page scroll down. After that you can't scroll up. Is any way to stop click event while page moving?
JsFiddle

And if you stop the animation when user mousewheel?
$(function() {
$(".go").on('click', function(event) {
event.stopPropagation();
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000);
});
});
var page = $("html, body");
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
page.stop();
});
Demo

What about disabling the button while it is running and enabling it again once animation is done?
$(function() {
$(".go").on('click', function(event) {
var $but = jQuery(this);
event.stopPropagation();
$but.attr("disabled", true);
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000, "linear", function(){
$but.removeAttr("disabled");
});
});
});

I assume you mean that if you rapidly click the button a couple of times it'll scroll down and not let you scroll back up, and not that it doesn't work when you "Click Button, Scroll Down, wait, Scroll Up".
If it's the first case, you can fix it like this.
$(function() { $(".go").on('click', function(event) {
event.stopPropagation();
$(".go").attr("disabled", true).delay(3000).attr("disabled", false); $('html, body').animate({
scrollTop: $("#myTarget").offset().top
},
3000);
});
});
This means that when you click on the button, it will be disabled for 3000 milliseconds (the time of your animation. This should stop a user from being able to click on it and trigger the animation more than once while it's animating.

The issue is that your animation is getting appended onto the previous animation for the html and body tags. Thus, you have to wait for all of the animations that have been started to die before you can scroll back up.
Things that you can do about this problem
Make the duration of the animation smaller
Call stop() on the elements you are animating before creating the new animation
Call stop() if the window is scrolled. This solution could be problematic if you ever have the body tag doing other animations. The first two solutions should be enough, anyway.
The first should be self explanatory and the second is very easy:
$(".go").on('click', function(event) {
event.stopPropagation();
$('body').stop().animate({
scrollTop: $("#myTarget").offset().top }, 500);
});
You also only need to animate the body element (not the html element).
JSFiddle Example

Use a scrolling state, like so :
$(function() {
//global var
isScrolling = false;
$(".go").on('click', function(event) {
event.stopPropagation();
if(!isScrolling) {
isScrolling = true;
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000,
//Only when it's completed (callback)
function() {
isScrolling = false;
}
);
}
});
});
Your problem is that it keeps trying to scroll down even though you are already down.