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 ScrollTop in the middle of an animation?

I have 2 containers whose widths change. Inside them, I have clickable elements. When a container is clicked, it resizes in an animation. I want to make it so that when a clickable element is clicked, its container resizes and scrolls to the clicked element. Here's a fiddle that shows this: http://jsfiddle.net/w7H3M/1/
However, it scrolls to the wrong position because of the resizing. Here's the event handler for the click:
<div id=left>...</div>
<div id=right>...</div>
$('#left').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width()
}, 800);
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});
$('#right').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});

Effectively, it does not work correctly because of the animation. The offset of the node you want to show at the top of the screen will change when the div expands. To achieve what you want, you need to set the scrollTop property when the animation completes. You can achieve this using the complete handler of jQuery.animate(). I've forked your jsfiddle to show you it. The only problem is that the two animationw now play one after the other instead of simultaneously.
$(document).ready(function () {
// generate content
var str = '';
for (i = 1; i < 100; i++) {
str += '<p>' + x100(i) + '</p>';
}
$('#left').html(str);
$('#right').html(str);
// end generate content
$('#left').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width(),
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
});
$('#right').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
});
});

Animate scroll between sections - without a plugin

Im trying to create a script that animates the scrolling between section on my page without using a plugin - just pure jquery. But seems that I'm experiencing some issues when I try and scroll my page. Can anyone help me?
Here is my jsFiddle
And my code:
$(document).ready(function() {
$('.main').bind('mousewheel', function(e){
var mHeight=$(document).height()/8;
console.log(mHeight);
if(e.originalEvent.wheelDelta /120 > 0) {
// alert('up');
$('html, body').animate({
scrollTop: mHeight
}, 1000);
}
else{
// alert('down');
$('html body').animate({
scrollTop: -mHeight
}, 1000);
}
});
});

check this
$('body').bind('mousewheel', function (e) {
e.stopPropagation();
e.preventDefault();
var mHeight = $(document).height() / 8;
console.log(mHeight);
if (e.originalEvent.wheelDelta / 120 > 0) {
// alert('up');
$('html, body').stop().animate({
scrollTop: -mHeight
}, 1000);
}
else {
// alert('down');
$('html body').stop().animate({
scrollTop: mHeight
}, 1000);
}
});
Demo
Edit
var index = 1;
$('body').bind('mousewheel', function (e) {
e.stopPropagation();
e.preventDefault();
var mHeight = $(document).height() / 8;
console.log(mHeight);
if (e.originalEvent.wheelDelta / 120 > 0) {
// alert('up');
index--;
mHeight = mHeight * index;
$('html, body').stop().animate({
scrollTop: mHeight
}, 1000);
}
else {
// alert('down');
index++;
mHeight = mHeight * index;
$('html body').stop().animate({
scrollTop: mHeight
}, 1000);
}
});
Updated Fiddle

Scroll to Top and Scroll to Bottom in Jquery

I tried to implement the scroller with top to bottom and bottom to top with jquery. I recently tried with percent.
From the Top to bottom with pixel is seems ok.(Means it works) for the bottom to top is only make scroll not completely finish if i mention percentage as 100
$('#spnTop').on("click",function(){
var percentageToScroll = 100;
var percentage = percentageToScroll/100;
var height = jQuery(document).height();
var documentHeight = $(document).height();
var scroll = $(window).scrollTop();
alert(scroll);
var scrollAmount = Math.round((height) * percentageToScroll/ 100)-scroll;
//alert(point);
alert(scrollAmount);
$('html,body').animate({ scrollTop: scrollAmount }, 'slow', function () {
alert("reached top"); });
});
Here is the fiddle.
For Example:
percentageToScroll is now 100 but the ending of scroll is not completely finish. (from bottom to top)
For top to bottom is 100 then it completely scroll to bottom of the page.
I am not sure how to make it workable.
Thanks.
Vicky

What about this?
$('#spnTop').on("click",function(){
var percentageToScroll = 100;
var percentage = percentageToScroll/100;
var height = $(document).scrollTop();
var scrollAmount = height * (1 - percentage);
alert(scrollAmount);
$('html,body').animate({ scrollTop: scrollAmount }, 'slow', function () {
alert("reached top"); });
});
$('#spnbottom').on("click",function() {
var percentageToScroll = 100;
var height = $(document).innerHeight();
var scrollAmount = height * percentageToScroll/ 100;
alert(scrollAmount);
var overheight = jQuery(document).height() - jQuery(window).height();
//alert(overheight);
jQuery("html, body").animate({scrollTop: scrollAmount}, 900);
});
Fiddle here

As I specified in comment I prepared a Demo
$(document).on("click","#spnTop",function(){
$('html,body').animate({scrollTop: 0}, 1500);
});
$(document).on("click","#spnbottom",function() {
var window_height = $(window).height();
var document_height = $(document).height();
$('html,body').animate({ scrollTop: window_height + document_height },1500);
});
I hope it may help you

jQuery(document).ready(function($){
$('#goToTop').on("click",function(){
$("html, body").animate({ scrollTop: 0 }, 2000);
return false;
});
$('#goToBottom').on("click",function() {
$("html, body").animate({scrollTop: $(document).innerHeight()}, 2000);
return false;
});
});

Now see you need the percentages
See demo here:
http://jsfiddle.net/a3g4d/
$('#spnTop').on("click",function(){
var percentage = 100;
var height = $(document).height();
var remove = +height / +100 * +percentage;
var spaceFromTop = +height - +remove;
$('html,body').animate({ scrollTop: spaceFromTop }, 'slow', function () {});
});

You can also use the span positions if you have top and bottom span always.
$('#spnTop').on("click",function(){
$('html,body').animate({
scrollTop: $("#spnbottom").offset().top
}, 'slow', function () {
alert("reached top");
});
});
http://jsfiddle.net/4qLvC/8/

I hope something like this :) might help you
$('#spnTop').on("click",function(){
$('html,body').animate(
{ scrollTop: 0 },
'slow',
function () {});
});
$('#spnbottom').on("click",function() {
var window_height = $(window).height();
var document_height = $(document).height();
$('html,body').animate(
{ scrollTop: window_height + document_height },
'slow',
function () {});
});
Use this link to try it out : demo

$(function () {
$("#scrollToBottom").click(function () {
$('html, body').animate({ scrollTop: window.screen.height }, 400);
});
$("#scrollToTop").click(function () {
$('html, body').animate({ scrollTop: 0 }, 400);
});
});

How can i combine this codes? [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
As the title says, I think this code can be simplified in less lines. Could someone help me with this?
$('a[href=#over]').click(function(){
$('html, body').animate({
scrollTop: $("#over").offset().top - 100
}, 2000);
});
$('a[href=#diensten]').click(function(){
$('html, body').animate({
scrollTop: $("#diensten").offset().top - 100
}, 2000);
});
$('a[href=#portfolio]').click(function(){
$('html, body').animate({
scrollTop: $("#portfolio").offset().top - 100
}, 2000);
});
$('a[href=#contact]').click(function(){
$("html, body").animate({ scrollTop: $(document).height() }, 2000);
});
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 2000);
return false;
});
I was thinking myself off an if/elseif statement, but im kinda stuck in there. So could you please have an look?

You can use the href attribute of anchors for selecting the element by IDs.
$('a').click(function(){
var id = this.href;
$('html, body').animate({
scrollTop: $(id).offset().top - 100
}, 2000);
});
$('a').click(function(e) {
e.preventDefault();
var id = this.href;
var scroll = '';
if (id === '#contact') {
scroll = $(document).height();
} else if (id === '#top') {
scroll = 0;
} else {
scroll = $(id).offset().top - 100;
}
$('html, body').animate({
scrollTop: scroll
}, 2000)
});

This wasn't tested. It is just your code that I minified (and optimized a little bit).
$('a[href]').click(function(){
var href = $(this).attr('href');
var htmlbody = $('html,body');
if( href == '#over' || href == '#diensten' || href == '#portfolio' )
htmlbody.animate({ scrollTop: $(href).offset().top - 100 }, 2000);
if( href == '#contact' )
htmlbody.animate({ scrollTop: $(document).height() }, 2000);
if( href == '#top' )
htmlbody.animate({ scrollTop: 0 }, 2000);
});

$('a').click(function(){
var id = $(this).attr("href");
if(id in {"#over": 1, "#diensten": 1, "#portfolio": 1}) {
$('html, body').animate({ scrollTop: $(this).offset().top - 100 }, 2000);
}
else if(id === "#contact") {
$("html, body").animate({ scrollTop: $(document).height() }, 2000);
}
else {
$('html, body').animate({scrollTop:0}, 2000);
return false;
}
});

Since you're only consolidating a process, there are countless answers. But in case you need to micromanage targets, you can do something like:
function reusable_scroll_anchor( q_ids, q_off ) {
for( var q_id in q_ids )(function(q_id) {
$("a[href=#" + q_id + "]").click(function(){
$('html, body').animate({
scrollTop: $("#" + q_id).offset().top - q_off
}, 2000);
});
})(q_ids[q_id]);
}
reusable_scroll_anchor(
['over', 'diensten', 'portfolio', 'contact', 'top' ],
100
);
Though this approach requires some manual tending, it's a reusable snippet for future sites.