Develop Reference

How can I stop $(window).scroll event with jquery?

I'm trying to freeze scroll at a div position till user click, hover another div. After user action, scroll should be released and work normally! But it doesn't work! How can I make scroll work normally after user hover, click on this div? Here is the full code for reference: https://jsfiddle.net/tqwr3hrp/ (tested on chrome)!
<div class="stopscroll">click/mouseover here to stop</div>
<div class="likebox"></div>
$(window).scroll(function(e) {
$('html, body').animate({ scrollTop: $('.likebox').offset().top - 100 }, 1000);
});
$('.stopscroll').on('tap click mouseover', function(e) {
$(window).off('scroll');
//another attempt
$('html, body').off('scroll');
//and another attempt
$('html, body').stop().animate();
});

This code makes that your page actually scrolls automatically:
function start_scrolling() {
$('body').animate({
scrollTop: $('body').height() - $(window).height()
}, 10000, 'linear');
}
start_scrolling();
This code lets the scrolling stop if you hover your div and lets it start again if you unhover it. Instead of doing the same with click I recommend adding a checkbox, which I did in this example. If the checkbox is checked, scroll as usual, if not, let the user scroll himself.
$('.stopscroll').mouseover(function() {
$('body').stop();
}).mouseout(function() {
if($('#autoscroll').is(':checked')) {
start_scrolling();
}
});
This last code is a bonus and lets the user take control immediatedly: If the user scrolls, the autoscroll is deactivated. If he wishes to enable the autoscroll again, he can use the checkbox.
$('body').on('scroll wheel DOMMouseScroll touchmove', function() {
$('body').stop();
$('#autoscroll').prop('checked', false);
});
JSFiddle

Bootstrap navi flickering by scrolling after clicking to a link

I have a fixed to top navigation. I have this navi from Bootstrap 3. On my page, I have several links, which have an svg image inside. By hovering on the link, it begin to move up and down. When I click to these links, my page scrolls smooth down to a specific position. But when I am trying to scroll down or up after clicking to those links, my navigation starts flickering in chrome. But when I click anywhere on the page with the mouse, it stops flickering.
What could be the problem or how to emulate a mouseclick anywhere on the page?
I tried:
$('body').click();
But it did now work.
Here is my site:
http://mival.de/examples/mival/index.html
When u click on the black arrow and scroll after the page in chrome, the navi start flickering.
JS Scroll
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
setTimeout(function() {
$('#homeSection').click();
}, 500);
});
});

Ok, found the solution. just added the following, to my arrow:hover class:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Do not really know, what it do, but it works!
P.S.: Besides that, I changed the measure of my translateY rule from em to px.

Stop animation if page is already at destination

I am currently using a bit of javascript to move the user down to the location of the information they click on in a side navigation menu. However the problem being if they click on one item and then another item when they go to scroll away the animation is still trying to complete. Is there a way to prevent the js from running if already at the top of the scroll top destination. I have a .stop() in already to stop the original animation on click. Or possibly cancel animation on scroll away?
$('#zoomTo li a').on('click', function(e) {
$('html, body').stop().animate({
scrollTop : $('#scrollDest').offset().top - 20
}, 1000);
e.preventDefault();
});

From the jquery site use:
.clearQueue().finish();
http://api.jquery.com/finish/

jQuery scroll to bottom of page locks/stutters/judders scroll

I'm trying to scroll to the bottom of my page after the user submits a form. However, when I execute the following code, the browser scrolls to the bottom of the page, but will not allow me to scroll back up (via mousewheel, scrollbar, or arrow press) without locking/shuttering/juddering.
var scrollToBottom = function() {
$("html, body").animate({ scrollTop: $(document).height() - $(window).height()}, 0);
}
Any idea what's causing this? It seems to "relax" its grip on the browser after about five seconds.

I ran your function and it did not lock me at the bottom for 5 seconds. By default it will lock when scrolling and release you when the browser reaches the predetermined location.
http://jsfiddle.net/oq9eo2zz/2/
Something else is likely causing the issue, but if you're looking for a quick work around you could force it to unlock (stop animating) on 'mousewheel DOMMouseScroll keyup keydown'.
$(window).on("mousewheel DOMMouseScroll keyup keydown", function(e){
$('html, body').stop();
});
0 duration:
http://jsfiddle.net/oq9eo2zz/1/
3000 duration:
http://jsfiddle.net/oq9eo2zz/4/
Hope this helps!

Use This
var scrollToBottom = function() {
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
return false;
}
OR
function scrollToBottom()
{
alert("Scrolling to bottom ...");
window.scrollTo(0, document.body.scrollHeight);
}

Using bootstrap，make slide to scroll up and down, not left or right

I have seen some website has this: they have only one page (actually they have some pages, but only show one at one time) on their homepage, which means they have no vertical scroll bar, but when you put your fingers scroll up and down on the touchpad, the homepage will scroll up or down smoothly,show some different contents.
Just like you have a slide, but the slide go up and down, not left or right.
Sample link: http://tangyan.maxinrui.com/
Can somebody show me how to did this, maybe using Bootstrap? Or give me a sample page.
Thanks in advance.

You can make it with buttons, I don't know if you want that.
Make a file called extra.js
put the following code in it:
$(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;
});
});
});
on the pages the extra.js is loaded all anchor links will scroll.
(Anchor link is just a link with 'id="one"' 'href="#one"')
I think when you want to make it scroll when the user scrolls you could hook this up to some javascript.