Develop Reference

Calling the function only once in a time

I have such a function on my website:
$("#search-label").on("keypress", function(e) {
if(e.which == 13) {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 2000);
}
});
Its task is to scroll to the selected element after press enter and it works fine, but the problem is that it can be called repeatedly in a short time and then the page gets stuck.
How to limit the possibility of calling it up to once every 10 seconds?
Thanks

You can use a mix of a variable and a setTimeout to do this:
var scrollOK = true;
$("#search-label").on("keypress", function(e) {
if((e.which == 13) && scrollOK) {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 2000);
scrollOK = false;
setTimeout(function(){ scrollOK=true; }, 10000);
}
});
It uses scrollOK to make sure that scrolling is OK, and when it scrolls, then it sets it to false temporarily (temporarily because the setTimeout sets it back to true after 10 seconds, or 10000 milliseconds).
Edit: as #ChloeAnderson said, this may take up more resources than it should. This is a version that should be better:
var lastScrolled = 0;
$("#search-label").on("keypress", function(e) {
if((e.which == 13) && (Date.now() >= (lastScrolled + 10000))) {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 2000);
lastScrolled = Date.now();
}
});

Force scroll to top updated

I am trying to force my page to load always on the top. I don't know if I have to define on-refresh or on-load but I've tried everything. I've searched all the previous questions and non of them seemed to work for me. I checked in Chrome and Mozilla. So do you have any suggestions? What should I do?
I tried the following:
1.
$(document).ready(function(){
$(window).scrollTop(0);
});
2.
jQuery('html,body').animate({scrollTop:0},0);
3.
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
4.
$(document).ready(function() {
if (window.location.hash) {
//bind to scroll function
$(document).scroll( function() {
var hash = window.location.hash
var hashName = hash.substring(1, hash.length);
var element;
//if element has this id then scroll to it
if ($(hash).length != 0) {
element = $(hash);
}
//catch cases of links that use anchor name
else if ($('a[name="' + hashName + '"]').length != 0)
{
//just use the first one in case there are multiples
element = $('a[name="' + hashName + '"]:first');
}
//if we have a target then go to it
if (element != undefined) {
window.scrollTo(0, element.position().top);
}
//unbind the scroll event
$(document).unbind("scroll");
});
}
});
5.
$('a').on('click', function(e) {
e.preventDefault();
// do your js stuff
$(window).scrollTop(0);
});
6.
$("html, body").animate({
scrollTop: 0
}, 600);

use animate function
$("html, body").animate({
scrollTop: 0
}, 600);

Updating the URL in the address bar for a fade in overlay div?

I have the code below which fades in/out a div for a contact page. I would like this page to have its own URL so when users type that into the address bar, the page loads up with the div already activated. Also, if possible, I would like it so when users click 'back' or 'forward' on their browsers, this page behaves like how a regular page would meaning the history is kept intact.
How should I go about applying this feature to what I already have?
var c = 0;
var contactHeight = $('#contact-keebs').outerHeight();
function contactFadeIn() {
$('#contact-keebs').fadeIn(200);
$('body').css({
height : contactHeight,
overflow : 'hidden'
});
$('#contact-info, #clients').addClass('animated fadeInUp');
}
function contactFadeOut() {
$('#contact-info, #clients').removeClass('animated fadeInUp');
$('body').css({
height : '',
overflow : ''
});
$('#contact-keebs').fadeOut(200);
}
$('#mail-wrap').click(function (e) {
e.preventDefault();
if (c++ % 2 == 0) {
$('#contact-button').addClass('project-button').css('width', '71px').text('Projects');
$('.mail-icon').attr('src', site.theme_path + '/img/icon-projects.png');
$('#contact-button').shuffleLetters();
if ($(window).scrollTop() != 0) {
$('html, body').animate({
scrollTop : 0
},200, contactFadeIn);
} else {
contactFadeIn();
}
} else {
$('#contact-button').removeClass('project-button').css('width', '96px').text('Get in touch');
$('.mail-icon').attr('src', site.theme_path + '/img/icon-contact.png');
$('#contact-button').shuffleLetters();
if ($(window).scrollTop() != 0) {
$('html, body').animate({
scrollTop : 0
},200, contactFadeOut);
} else {
contactFadeOut();
}
}
});

MAY HELP USING API PUSHSTATE ?.
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Conflicting "back to top" scripts - how to fix?

I'm using 2 scripts found on the internet, one for a smooth scroll to a DIV at the bottom of the page, and one for a smooth scroll "Back to top". The issue is that there's a conflict between both and therefore the "back to top" one doesn't work (no back to top on click). Used independently they both work perfectly.
How could I "merge" them both into one single script? (and keep the fade-in fade-out effect of the back to top script) See http://jsfiddle.net/GjsVq/1/
Many thanks
$(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;
});
});
});
$(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});

$('a[href^="#"]').on(... is selecting both <a> elements. One approach is to either rewrite this selector to match only the <a> elements that should force a scroll to the bottom (maybe use a CSS class for this?)
An alternative, quick-and-dirty fix would be to reset the event handlers on the "back-to-top" element before attaching its own click handler: jQuery('.back-to-top').off().click(...

I normally just use one smooth scroll function and then set my "go to top" button with a href="#idOfHighestElementOnPage". This is the smooth scroll function (which may include something helpful if you don't want to go the same route I went):
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 100
}, 'normal');
return false;
}
}
});
})
window.onscroll = scrollFunction;
function scrollFunction() {
var doc = document.documentElement, body = document.body;
var top = (doc && doc.scrollTop || body && body.scrollTop || 0);
if (top > 200) {
$('.back-to-top').fadeIn();
}
else {
$('.back-to-top').fadeOut();
}
}

smooth scroll and accordion conflict bootstrap

although this has been asked a few times I haven't found something which will fix my problem.
This is my code for the smooth scroll:
$(function() {
$('a[href*=#]:not([href=#]),a[href*=#]:not(a[data-toggle])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
it's css-tricks code with a bit of editing.
This is the site: http://redrocketwebsitedesign.co.uk/test/my3DtwinAlpha/about/#arrow6
So the accordion is still being selected for the scrolling, and it's not running the accordion js.
I think there's a problem with my javascript not selector code :
a[href*=#]:not(a[data-toggle])
Any help appreciated :-]

This is what you are really looking for :
$('a[href*="#"]:not([href="#"]):not([data-toggle])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
:not([data-toggle])
is to avoid smooth scroll with bootstrap tab, carousel etc...

The page you provided has a mistake in code:
$('a[href*=#]:not([href=#]),'a[href^="#"]:not([data-toggle])').click(function() {
^^^ - extra and unnecessary character
So your handler is not set.

You can also consider specifying the class of the element(s) that should trigger a smooth scroll animation (thus excluding others, such as the accordion tabs), like this:
$('a[href*=#][class*="smooth"]:not([href=#])').click(function()
Or vice versa, specify the class of the element(s) that shouldn't trigger the script (in this case we exclude the class of the links that trigger the accordion effect):
jQuery('a[href*=#]:not([href*=#][class*="accordion-toggle"])').click(function()

var headp = $(".pixxett-header").innerHeight();
var stick = $(".pixxett-header.sticky").innerHeight();
$(document).on('click', 'a[href^="#"]:not([href="#"]):not([data-toggle])', function (event) {
event.preventDefault();
if (scroll == 0){
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - stick}, 500);
}else{
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - headp}, 500);
}
});