I am using pure javascript for vertical scroll.I need this scroll to have smooth behaviour.
function move_up(scroll_nav)
{
var container = document.getElementById(scroll_nav);
upScroll(container,'up',40,50,10);
}
function move_down(scroll_nav)
{
var container = document.getElementById(scroll_nav);
upScroll(container,'down',40,50,10);
}
function upScroll(element,direction,speed,distance,step)
{
scrollAmount = 0;
var slideTimer = setInterval(function(){
if(direction == 'up'){
element.scrollTop -= step;
} else {
element.scrollTop += step;
}
scrollAmount += step;
if(scrollAmount >= distance){
window.clearInterval(slideTimer);
}
}, speed);
}
I need an animate function similar to the one in this link but without jquery.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_smooth_scroll_jquery
I need an animate function to be included
Please provide an solution .
element.scrollTo({ top: ..., behavior: 'smooth' });
Related
I have a webpage that when scrolled down, the text freezes when it reaches the last paragraph of text but the images keep on scrolling. I've got the implementation working but there is a lot of jank when scrolling with a mouse wheel, not so much if I click and drag the scroll bar.
Are there any optimizations I can make to this code to make work as intended or is there a different way to accomplish the same task?
window.addEventListener('scroll', function (e) {
window.requestAnimationFrame(keepTextStationary);
//keepTextStationary(); // Less janky, but still horrible
});
function keepTextStationary() {
var textRect = writtenContent.getBoundingClientRect();
var imageRec = images.getBoundingClientRect();
if (textRect.bottom < window.innerHeight && document.documentElement.scrollTop > 0) {
writtenContent.style.position = 'relative';
writtenContent.style.bottom = (225 - document.documentElement.scrollTop) + 'px';
if (imagesTop === undefined) {
imagesTop = imageRec.y;
}
} else {
writtenContent.style.bottom = (225 - document.documentElement.scrollTop) + 'px';
}
if (imageRec.y >= imagesTop) {
writtenContent.style.position = '';
}
}
Here is the site so you can see the problem.
https://bowerbankninow.azurewebsites.net/exhibitions/oscar-perry-the-pheasant
You are causing layout trashing every time you call getBoundingClientRect. Try debouncing your scroll events:
var lastScrollY = 0;
var ticking = false;
function keepTextStationary() {
var textRect = writtenContent.getBoundingClientRect();
var imageRec = images.getBoundingClientRect();
if (textRect.bottom < window.innerHeight && lastScrollY > 0) {
writtenContent.style.position = 'relative';
writtenContent.style.bottom = (225 - lastScrollY) + 'px';
if (imagesTop === undefined) {
imagesTop = imageRec.y;
}
} else {
writtenContent.style.bottom = (225 - lastScrollY) + 'px';
}
if (imageRec.y >= imagesTop) {
writtenContent.style.position = '';
}
ticking = false;
}
function onScroll() {
lastScrollY = document.documentElement.scrollTop;
requestTick();
}
function requestTick() {
if (!ticking) {
requestAnimationFrame(keepTextStationary);
ticking = true;
}
}
window.addEventListener('scroll', onScroll );
See this article for in-depth explanation: https://www.html5rocks.com/en/tutorials/speed/animations/
You dont.
Relocations / styling in javascript take place after the CSS has been loaded. Bad practise. What you can do, is make it animated to make it look less horrible.
Why is pure CSS not an option ?
I have created some JavaScript to scroll up and down my DIV which has a overflow. I already have an up and down button that works fine with this code, I want to know how I can also add the mouse-wheel to scroll, below is my code:
var t = 0;
function MoveUp() {
t += 665;
if (t > 0) t = 0;
$("#contents ").animate({
top: t
}, 1000, function () {
// Animation complete.
});
}
function MoveDown() {
t -= 665;
with($("#contents")) {
//if(t < -clientHeight)
//t = -clientHeight;
if (t < -1330) t = -1330;
$("#contents").animate({
top: t
}, 1000, function () {
// Animation completed
});
}
}
Use this CSS to enable scrolling on your page:
body{overflow:scroll;}
OR
Scroll for a specific div:
.yourDivClass{overflow:scroll;}
I am using this to scroll the page. However I would like it to stop scrolling at set positions on the page.
var t;
var scrolling = false;
function doScroll() {
$('body').scrollTop($('body').scrollTop() + 20);
}
$('#pause').on('click',function(){
scrolling = !scrolling;
if(!scrolling){
clearInterval(t);
return;
}
t = setInterval(doScroll, 10);
});
I was hoping that by adding this to the doScroll function would stop the scroll at positions between 100 and 150 but, it does not.
if($("#pause").offset().top >=100 && <150){
clearInterval(t);
}
Any ideas?
Got it! if condition was incorrect, scrolling had to be set to false to allow restart...
function doScroll() {
$('body').scrollTop($('body').scrollTop() + 20);
if($("#pause").offset().top >=100 && $("#pause").offset().top < 150){
clearInterval(t);
scrolling = false;
return;
}
}
Thanks to zvona
Please i need help sliding images using jquery back and forth, or just to go round. right now it slides upto the last element and rushes back to the first div and begins again, not beautiful at all,i know i should call back a function to do that but i keep getting mistakes. thanks in advance, this is my jquery code below
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 190;
var slides = $('.slider_move');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 5000;
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float' : 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
} else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder')
.animate({'marginLeft' : slideWidth*(-currentPosition)});
}
});
Instead of:
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
} else {
currentPosition++;
}
You need to move the first slide to the very end (and adjust the position of the container at the same time):
if (currentPosition > 0) {
$('#slidesHolder').css('marginLeft',0)
.children().first().appendTo('#slidesHolder');
} else {
currentPosition += 1;
}
http://jsfiddle.net/mblase75/qatry/
Or, to optimize the whole thing a little more, you can eliminate the currentPosition variable and the moveSlide sub-function, and just use a callback in the .animate method:
function changePosition() {
$('#slidesHolder').animate({
'marginLeft': 0-slideWidth
}, function() {
$('#slidesHolder').css('marginLeft', 0)
.children().first().appendTo('#slidesHolder');
});
}
http://jsfiddle.net/mblase75/8vaCg/
I have a Javascript file that I am using to try to animate a dropdown menu. I have the "Toggle" function in that file set to run when I click on a certain div. Here's the script I'm using:
var up = true;
function Toggle(x)
{
if (up)
{
for (var i = x.offsetTop; i <= 0; i++)
{
x.style.top = i;
if (i == 0)
{
up = false;
}
}
}
else if (up == false)
{
for (var i = x.offsetTop; i >= -50; i--)
{
x.style.top = i;
if (i == -50)
{
up = true;
}
}
}
}
In the HTML div I want to animate, I have the "onclick" property set to "onclick=Toggle(this)". The first for loop works as it should (it sets the div's top offset to 0). However, the second for loop doesn't set the offsetTop. I know that the for loop is activating because I've tested it and it gives me every integer between 0 and -50. Why isn't it setting the offset position?
1) You must specify a unit to the top ie: x.style.top = i +"px"
2) Your function won't animate instead of you use a setInterval or a setTimeout
Like you asked, an example. I wouldn't do it like this for one of my project, but i kept your function to make you more familiar with the code.
I Used setTimeout instead of setInterval because setInterval must be cleared when not needed and setTimeout is just launched one time :
var Toggle = (function() { // use scope to define up/down
var up = true;
return function(element) {
var top = parseInt(element.style.top, 10); // element.offsetTop ?
if ( !top ) {
top = 0;
}
if (up) {
if (element.offsetTop < 0) { // if we are not at 0 and want to get up
element.style.top = (top+1) + "px";
setTimeout(function() { Toggle(element); }, 10); // recall the function in 10 ms
} else { // we change up value
up = !up;
}
}
else {
if (element.offsetTop > -50) {
element.style.top = (top-1) + "px";
setTimeout(function() { Toggle(element); }, 10); // recall the function in 10 ms
} else {
up=!up;
}
}
}
})();
You'd have to use x.style.top = i + 'px' as top and similar css properties must define the type (px, em, %, etc.) unless they are 0, as this is 0 in any case.
But your script would actually snap the div directly to -50px, as you do not wait between those iteration steps.
I'd recommend to use a library like jQuery to use it's animate() method.
function Toggle(obj) {
$(obj).animate({
top: parseInt($(obj).css('top')) === 0 ? '-50px' : '0px'
})
}