Develop Reference

Two events from one button

I have a row of 8 buttons that show/hide content below them depending on the button selection. That part's working fine. The other thing I want to happen is to scroll down to the selection - the buttons are right at the bottom of the screen, and while clicking a button does swap out the content, people don't see it happening without scrolling to it themselves. So I created an element between the buttons and the content and gave it an id of "scroll-down-to-sections." and added the last line here:
jQuery(document).ready(function ($) {
$(".tab-title").each(function () {
var section_id = $(this).find("a").attr("href");
$(this).find("a").removeAttr("href");
$(this).click(function () {
$(this).siblings().removeClass("active-tab");
$(this).addClass("active-tab");
$(".tab-content").slideUp(500);
$(section_id).slideDown(500);
$("html, body").animate(
{ scrollBottom: $("#scroll-down-to-sections").offset().top },
1000
);
});
});
});
Works great, but the last line isn't working, and I'm sure it should. Any ideas?

I revised the last line to:
$('html, body').animate({scrollTop: $("#scroll-down-to-sections").offset().top}, 1000);
and it works as intended. Sorry for the lame post!

jQUery --> After window resize scroll to section does not work as expected

After window resize my scroll function does not work as I described below (description shows how I want it to work):
I do window resize.
After window resize when I click the given menu item the window should scroll to...
corresponding to that menu item section offset().top-45 for max-width:480px (first breakpoint)
corresponding to that menu item section offset().top-90px for min-width 481px (second breakpoint)
https://jsfiddle.net/d1abevro/1/
It only works as expected for a given breakpoint without window resize (onload).
function displaymenu() {
if ($(window).width() <= 480) {
$('.c-main-menu ul').css({display: 'none'});
$(document).on("click", "a.c-main-menu__link", function(event){
event.preventDefault();
$('html,body').animate({
scrollTop: $($.attr(this, 'href')).offset().top-56
}, 800);
$('.c-main-menu ul').slideToggle();
});
$('.c-nav .menu-trigger').click(function() {
$('.c-nav .c-main-menu ul').slideToggle();
});
} else {
$('.c-main-menu ul').css({display: 'block'});
$(document).on("click", "a.c-main-menu__link", function(event){
event.preventDefault();
$('html,body').animate({
scrollTop: $($.attr(this, 'href')).offset().top-90
}, 800);
});
}
}

That is caused because after each resize you append a new event. You should kill the old event an create a new one in order to prevent conflict with the old event. To get this approach the best way is to adding a namespace for your event, for example:
$(document).on("click.menuLinkEvent",".my_links", function(){});
And before adding the new event kill any old event it using unbind method and passing the event with the namespace:
$(document).unbind("click.menuLinkEvent");
Also looks like you understand correctly that the event will be appended each time after resize so you added a setTimeout function, but forgot to add a time, so however it will fire inmediately.
I made some changes to your fiddler. Let me know if it works as you expect

jQuery .one(), how to use it in my case

Im working on a function who's triggering events when we scroll down the page but I need it to trigger the events only once and I can't figure out how to use .one() in my case. Could you give me a hand please ?
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.sized').offset().top + $('.sized').outerHeight() - window.innerHeight)
{
$(".rotate").toggleClass("down"),
jQuery('.skill-bar').each(function()
{
jQuery(this).find('.skill-fill').animate(
{
width:jQuery(this).attr('data-percent')
}, 4000);
});
}
});
The main problem is that $(".rotate").toggleClass("down") triggers each time I reach the anchor and I want it to trigger only once.
The other function just set some divs to a certain width so it dont really matter since they dont go back to their original width:
Thanks for your help.

window.scroll events triggering twice

No matter what method I use to detect scrolling on the page the event is triggered twice. Please see the code for the different methods I have tried.
<body onmousewheel="alert('Why are you alerting twice?')">
or
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(window).scroll(function(){
alert("Why are you alerting twice?");
});
</script>
or
window.onscroll = please_scroll;
function please_scroll() {
alert("Why are you alerting twice?");
}
I have even tried using $.debounce.
In case it is of any use I will explain what I am trying to do:
When the user scrolls the wheel either up or down, the page will animate the scroll to the next full width content div. I have code that is successfully doing this onclick of my menu, but I would also like it to happen as the user scrolls, essentially auto assisting them with scrolling to each part of my page. This is the function I currently have for scrolling:
function scrollTo(id){
// Scroll
$('html,body').animate({scrollTop: $("#"+id).offset().top - 110},'slow',function(){
animation_active = "false";
});
}

many devices can trigger scroll events which appear to happen once more often. simply use a timeout for that:
var timeout;
$(window).scroll(function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
// do your stuff
}, 50);
});
you can play with the value 50, i recommend something between 50 and 150.

How to animated/smooth scroll to div using scrolltop

Can someone help me turn my code into one that will animate the scroll. I've been researching and trying to do it myself but I'm obviously not doing something correctly.
Here is my JS:
$(function() { //When the document loads
$(".jrm-menu-whyus > a").bind("click", function() {
$(window).scrollTop($("#menu-jrm").offset().top);
return false;
});
});
Thanks!
It works fine, just want to animate the scroll.

Use jQuery.animate():
$("html, body").animate({scrollTop: $("#menu-jrm").offset().top});
jQuery.animate documentation