Develop Reference

Page not scrolling to top in salesforce lightning

In salesforce lightning component, we have three different divs which we are hiding and showing as needed using display none css property. Fist div has more contents and we have to scroll the page till the end to submit the form and on submit next page is visible which has few lines of content but we have to scroll up to see those contents. Is there any way that I can avoid scrolling. Second div is taking first div height.

You could try this in your doInit controller method:
window.scroll(0, 0);

Use below code. As Salesforce lightning use 'transform' CSS property to scroll.
Just apply 'scroller' class to the div you want to put on top.
var cssScrolltoTop = $(".scroller"); // css class to find scroll position
if (cssScrolltoTop) {
var cssScrolltoTopTransform = cssScrolltoTop.css("transform");
if (cssScrolltoTopTransform) {
cssScrolltoTop.css("transform", "translate3d(0px, 0px, 0px)"); //set 'transform' since lighntning architecture uses css 'transfrom' property to scroll
}
}

I faced similar issues , then we used this event in the controller to resize the div:
$A.get("e.ui:updateSize").fire();
This was later deprecated by salesforce then we wrapped the div which is expanding / collapsing:
<ui:scrollerWrapper >
// Add your <div>
</ui:scrollerWrapper>

To make the scrollTop = 0 to work the container div has to have an internal scroll. Which we can get by either giving a height via px or via vh.
Try that out it should work. I was facing a similar issue while adding LWC inside Flexi Page. The Flexi page has its own scroller but for that, the scrollTop doesn't work. But if we create a separate scroller at the top-level div then the scrollTop starts to work.
Check this out. I have created this and it works perfectly fine for me: https://webcomponents.dev/edit/3vpWJ46hxykfPSACfuNN

creating a visible on load Pre-loader Page

Trying to replicate the pre-loader page on load the SVG and a background image appears and as soon as the user scrolls the page scrolls to the content and the page-loader is not visible or can be reached again unless you refresh the page, not sure how to tackle this, any help to point me in the right direction would be great- I have tried diseminating the said page.

there are a few ways to accomplish this, a simple starting point could be something like this:
basic html outline:
<div id="loader">
LOADING Image/content
</div>
<div id="body">
website body
</div>
CSS
#body{display:none;}
jQuery
$(document).ready(function(){
$("#loader").hide();
$("#body").show();
});
noscript fallback
<noscript>
<style>#loader{display:none;}#body{display:block !important;}</style>
</noscript>
Basically, this code has two divs the loader and the body, the body is set as display none in the CSS. When the page is ready, jquery is triggered to hide the loader and show the body.
The noscript fall back will set body to visible when javascript is disabled.
There are multiple ways to accomplish, this is just one idea.

Out of one of a hundred different ways, my initial thoughts were along these lines:
Wrap your main content in a wrapper with position relative and give it an offset from the top by 100% of the window width
Make the page-loader 100% height and width and position fixed
Offset the wrapper before the page is fully loaded, and then just transition it to 0 offset once the page had loaded
See a working jsfiddle here

Create an element (Div) that covers the whole screen.
Behind it (smaller z-index) add a Div container that holds all the images.
Add in JavaScript a load event function to all images:
image.onload = function() {
//image was loaded
}
Hide the cover Div when all images was loaded.
How to know when all images were loaded? add a counter or use a Promise.
Add overflow: none to disable scrolling, and add click event or scroll event (using jQuery) and set overflow to auto.
There are a lot of ways to implement each of these sections.

jQuery toggle div: have below content to slide "gently"

I use this script to toggle a div with an animation. It works like a charm, except that the content below the div to toggle moves jumpy when .click is triggered.
$('.toggle').click(function() {
var $toggled = $(this).attr('href');
$($toggled).siblings('.gallery:visible').hide();
$($toggled).toggle("slide", {direction: 'up'}, 750);
return false;
});
How can I have the content below to slide "gently" (as content of toggled div does)? Thanks in advance! :-)

I can't understand your call to .toggle with regards to the documentation. The order of parameters, their values, just don't match the documentation.
I have tried to use .slideToggle() - it works perfectly.

Try use thumbnails instead.
Use any program to change their size to the "slidedown" size. Change the <img> src to the thumbnail (smaller image) and change the <a> url to the actual size.
The website is loading the large size and then rezise them. This is my best guess why its feels laggy correct me if im wrong.
Good luck!
Hint: Try using a small image on every slot before you create thumbnails and see if it is actually causing the trouble.

HTML/CSS/JAVASCRIPT : How to move an element and not show scrollbars

i'm trying to slide a div element from outside the page to within the page. However as soon as the element is shown outside the page, horizontal scrollbars appear!
How can I achieve this without the scrollbars appearing?
Any help appreciated very muchly, thanks :)

Briefly, using overflow-x:
function moveStuff() {
$('body').css('overflow-x', 'hidden');
$('#iteminmotion').show().animate(..., function() {
$('body').css('overflow-x', 'auto');
});
}

move the element off the page to the left, moving it off to the right increases the width of the page

You could temporarily turn off side scrolling by applying this css to the body:
body {overflow-x:hidden;}
http://jsfiddle.net/pxfunc/YYUZJ/

Do you really need to construct the element off page, or just make it look like it slides onto the screen? Ive done similar things in the past to emulate a graphic that slides across a page, but instead of starting outside the view area I've created it as far to the side as possible and then animated the slide to the middle. The user experience at that point can be a graphic that slides onto a page from outside the view area.

slide effect with jquery

I'd like to create a slide effect using jQuery. I have several div's:
<div id='div_1'>content currently displayed</div>
<div id='div_2' style="display:none">content to be loaded</div>
<div id='div_3' style="display:none">content to be loaded</div>
The idea is that div_2 appears while sliding and "pushing" div_1 out of sight, a little like scrolling a window (horizontal or vertical). I think I can't use actual scrolling because the divs' content is loading via ajax, so I can't position it precisely before it's loaded.
Any idea?
TIA
greg

You mean like this:
$('#div_2').slideDown('slow', function(){
$('#div_1').slideUp('slow');
});
See the working demo here.

Greg, it sounds like you are looking for something like I have done here:
http://jsfiddle.net/2E5Qv/
If so, what you want to do is to contain all of those <div>s inside a parent, and then when you want to slide them, animate the top of each div up the correct number of pixels. The solution I provided above has each <div> more or less set to a fixed height of 20px (via line-height).
The parent <div> acts as a sort of window to show only the current content.

I took what Sarfraz provided and modified it slightly based on what I think you were looking for. For the sake of the demo, I also made it fire on the click event. You can find the working example here: http://jsbin.com/emowu3/3
$('#div_1').click(function(){
$('#div_1').slideUp('slow');
$('#div_2').slideDown('slow');
});
$('#div_2').click(function(){
$('#div_2').slideUp('slow');
$('#div_3').slideDown('slow');
});
$('#div_3').click(function(){
$('#div_3').slideUp('slow');
$('#div_1').slideDown('slow');
});