We Keep Coding

How to make slow the Scroll-Top Speed

ScrollTop is a jquery plugin (go to top of page), trying to make slow Scroll Speed, but not working. I have changed scrollSpeed : 'fast', to scrollSpeed : 'slow', but it still fast, nothing change.
JS:
$.fn.extend({
addScrollTop: function(options) {
var defaults = {
useObjWindow : false,
scrollSpeed : 'fast',
zIndex: '99'
}
var options = $.extend(defaults, options);
if($('body').find('.scrollTop-btn').length == 0) {
$('body').append('<div class="scrollTop-btn" style="display:none;"><i class="fa fa-chevron-up"></i></div>');
}
if(options.useObjWindow) {
var parentWindow = this;
var scrollWindow = this;
}
else {
var parentWindow = window;
var scrollWindow = 'html, body';
}
$(document).ready(function() {
$('.scrollTop-btn').on('click', function() {
$(scrollWindow).animate({scrollTop:0}, options.scrollSpeed);
});
$(parentWindow).scroll(function() {
$('.scrollTop-btn').hide();
var aTop = $('.scrollTop-btn').height() + 20;
if($(this).scrollTop() >= (aTop + 20)) {
$('.scrollTop-btn').css('z-index', options.zIndex);
$('.scrollTop-btn').show();
}
else {
if($('.scrollTop-btn').is(":visible")) {
$('.scrollTop-btn').hide();
}
}
});
});
}
});
Call:
jQuery(document).ready(function() {
jQuery("body").addScrollTop();
});
How to make it slower or smoother, when it go to top?

use jquery animate()
$('html,body').animate({ scrollTop: 0 }, 'slow');
refer this stack overflow question

Only with CSS:
html {
scroll-behavior: smooth;
}

Using jQuery
If you want you can customize how much time you would like the "scrolling" to last. Or do something else when scroll effect is finished.
I have a: <a href="#" class="scrollToTop">
And want to scroll to an element with class "beginning"
$('.scrollToTop').on('click', function(event){
event.preventDefault();
$('html, body').stop().animate({scrollTop: $('.beginning').offset().top}, 500);
});
The last part where you have the 500. You can set there how much time you want the effect to last. In milliseconds.
http://api.jquery.com/animate/

Replace 'slow' with - Ex. 1000, 5000, 10000
$('html,body').animate({ scrollTop: 0 }, <milliseconds>);
// Scroll 2 sec
$('html,body').animate({ scrollTop: 0 }, 2000);
// Scroll 5 sec
$('html,body').animate({ scrollTop: 0 }, 5000);

jquery - Swipe Page Counting

I am creating a swipe page system using the library touchSwipe.js.
With the method I have, I can swap between pages however, I cannot figure out to go back to previous page properly.
Right now if I swipe right and left few times the counting system goes out summing the swipes.
How can I make the counting system properly in order to move between pages?
var swipeRight = 0;
var swipeLeft = 0;
var swipePage = 0;
function swipe1(event, direction, distance, duration, fingerCount) {
if (direction == "left") {
swipeLeft++;
if (swipeLeft == 5) {
swipeLeft = 0;
}
}
if (direction == "right") {
swipeRight++;
if (swipeRight == 5) {
swipeRight = 0;
}
}
swipePage = swipeLeft - swipeRight;
if (swipePage == 0) {
$("html, body").animate({
scrollLeft: 0,
}, 1500);
swipeLeft = 0;
swipeRight = 0;
}
if (swipePage == 1) {
$("html, body").animate({
scrollLeft: $("#hwwPage").offset().left
}, 1500);
}
if (swipePage == 2) {
$("html, body").animate({
scrollLeft: $("#projPage").offset().left
}, 1500);
}
if (swipePage == 3) {
$("html, body").animate({
scrollLeft: $("#digiPage").offset().left
}, 1500);
}
if (swipePage == 4) {
$("html, body").animate({
scrollLeft: $("#contPage").offset().left
}, 1500);
}
console.log(swipeRight + "+" + swipeLeft);
console.log(swipePage);
}

I have fixed your code: you don't really need swipeleft and swiperight i think. Just increase or decrease the swipePage value depending on the swipe direction:
var swipePage = 0;
function swipe1(event, direction, distance, duration, fingerCount) {
if (direction == "left")
if (swipePage > 0)
swipePage++;
if (direction == "right")
if (swipePage < 4)
swipePage--;
var pageIds = ["",
"#hwwPage",
"#projPage",
"#digiPage",
"#contPage"
];
$("html, body").animate({
scrollLeft: $(pageIds[swipePage]).offset().left
}, 1500);
}

jQuery animate callback with promise still fires too early

I scroll my homepage back up if the logo in my menu is clicked. I also have a listener on $(window).scroll() which animates an object out of the screen with a negative margin.
My problem is that this event gets triggered with the animation (animate scrollTop).
This shouldn't occur because I have a boolean variable which has to be true to do this, I only set this on true AFTER the scroll animation using a combination of .promise() and .done().
This is my JavaScript:
var firstscroll=true;
$(function(){
var captionWidth= $(".caption").children().size() * 35;
$(".caption").width(captionWidth);
$(window).scroll(function() {
if(firstscroll){
$(".hidden-menu").removeClass("hidden-menu", {duration:500});
$('.header').animate({
marginTop: $('.header').height() * -1
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500);
firstscroll = false;
}
});
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500).promise().done(resetFirstScroll());
});
});
var resetFirstScroll = function() {
firstscroll=true;
}
A solution would be to give the function a setTimeout of 50 milliseconds, but I'd rather do it correctly after the animation is completed.
Using the standard callback gives the same output:
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500, function() {
resetFirstScroll();
});
});
});
var resetFirstScroll = function() {
firstscroll=true;
}

For those who want the "hacky" solution:
var firstscroll=true;
$(function(){
var captionWidth= $(".caption").children().size() * 35;
$(".caption").width(captionWidth);
$(window).scroll(function() {
if(firstscroll){
$(".hidden-menu").removeClass("hidden-menu", {duration:500});
$('.header').animate({
marginTop: $('.header').height() * -1
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500);
firstscroll = false;
}
});
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500, function() {
setTimeout( resetFirstScroll, 50 );
});
});
});
var resetFirstScroll = function() {
firstscroll=true;
}

jQuery UI Slider doesn't work (fiddle is provided)

I've inserted a jQuery UI slider in my website, which works pretty good. Here you can see the slider: FIDDLE
When you click on 'back to the top' you see it just scrolls to the top. But when I go with the slider to for example 1918, it just goes without any slide.
Is there any way to apply this scroll jquery to the jQuery slider, so that also scrolls down the page just like the button 'back to the top'.
Thanks in advance.
Here's the code for the smooth scroll:
$(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;
});
});
});

Use the same approach for scrolling down that you are using for scrolling up. The change function for your slider should use the same animate method. You can also simplify your function by removing the if statement and reusing the array for obtaining the anchor:
change: function(event, ui) {
$('html, body').animate({ scrollTop: $('#'+araObj[ui.value-1]).offset().top }, 900); }
});
Changing just that function would give you this:
$(function() {
var araObj = new Array( 1900, 1918, 1931, 1975, 1976, 1978, 2000, 2002, 2004, 2012, 2013 );
$("#slider-range-max").slider({
min: 0,
max: araObj.length,
value: 0,
create: function() {
for (i=0;i<=araObj.length;i++)
{
$(this).append($('<span></span>').css("left",((i+0.97)*(100/araObj.length))+"%").addClass("slider-digit").text(araObj[i]));
};
},
change: function(event, ui) {
$('html, body').animate({ scrollTop: $('#'+araObj[ui.value-1]).offset().top }, 900); }
});
});
// This is for the smooth scroll
$(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;
});
});
});

One major problem is that you are initializing $(function() { and $(document).ready(function(){ all the code can and should be written in one initialization function that runs when the document is ready.
The way you have it setup currently is causing some issues with the document and sometimes your elements are not being found by Id because of this.
I would consolidate your code into one ready function:
Something like this would work:
$(document).ready(function(){
var araObj = new Array( 1900, 1918, 1931, 1975, 1976, 1978, 2000, 2002, 2004, 2012, 2013 );
$("#slider-range-max").slider({
min: 0,
max: araObj.length,
value: 0,
create: function() {
for (i=0;i<=araObj.length;i++)
{
$(this).append($('<span></span>').css("left",((i+0.97)*(100/araObj.length))+"%").addClass("slider-digit").text(araObj[i]));
};
},
change: function(event, ui) {
var year = '';
var val=ui.value;
if(val == 1)
{
year = '1900'; //same tab
}
else if(val == 2)
{
year = '1918';
}
else if(val == 3)
{
year = '1931';
}
else if(val == 4)
{
window.location.href='http://www.google.com';
}
else if(val == 5)
{
window.location.href='http://www.google.com';
}
if(year != ''){
$('html, body').stop().animate({
'scrollTop': $('#'+year).offset().top
}, 900, 'swing', function () {
});
}
}
});
console.log(araObj);
$('.link').click(function(e){
e.preventDefault();
$('html, body').stop().animate({
'scrollTop': 0
}, 900, 'swing', function () {
});
});
});
Example:
http://jsfiddle.net/trevordowdle/wqB5q/9/

Delay mousewheel function

I'm using the mousewheel and waypoints plugin to scroll sections of my page; The problem I am having is when I scroll using the apple mighty mouse the scrolling is too sensitive and the function gets triggered more then once when the animation is complete. I tried to set a timeout function and variable to check if the animation is complete but neither of these worked.
I would like to replicate an effect similar to the one on this website.
JQUERY
$('body').mousewheel(function(event, delta, deltaX, deltaY) {
clearTimeout(interval);
console.log('test');
$('section').waypoint(function(direction){
thisID = $(this);
},{ offset: '350' });
indexPos = thisID.index('section');
if (completed == true) {
completed = false;
var interval = "";
if (delta > 0) {
interval = setTimeout(function(){
if ($(this).not(":first-child")) {
//$(this).animate(function(){
$('html, body').stop().animate({
scrollTop: thisID.prev().offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
//});
}else {
$('html, body').stop().animate({
scrollTop: thisID.offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
},400);
}
else if (delta < 0) {
interval = setTimeout(function(){
if ($(this).not(":first-child")) {
$('html, body').stop().animate({
scrollTop: thisID.next().offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
else {
$('html, body').stop().animate({
scrollTop: thisID.offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
},400);
}
};
return false; // prevent default
});

I don't know what this is doing: indexPos = thisID.index('section'); but before doing anything, I would check if ins't anything in progress already:
$('body').mousewheel(function(event, delta, deltaX, deltaY) {
if($('html').is(':animated') || $('body').is(':animated')) return false;
// else, do your stuff...
});

You can use underscore js http://underscorejs.org/
and do something like this:
$('body').mousewheel(_.debounce(function() {
//handle the mouse wheel event in here
}, 30)
This will wait for 30 ms from the last mousewheel event before firing the callback

This website doesn't seem to use scrolling. It merely moves to a new anchor (watch the url when scrolling) which is triggered by moving (scrolling) your mouse up or down as a trigger which feels like lagged scrolling (but in fact, you don't have any control over the direction once it moves). You can use jquery animate to do that.