Fixed div with scroll top button [duplicate] - javascript

This question already has answers here:
How to scroll an item inside a scrollable div to the top
(5 answers)
Closed 6 years ago.
I have fullscreen fixed div, with content from ajax query. Div is scrollable, because has a lot of content. And now, on bottom, I need a button to scroll to top of div. I try scroll with but, this looks like doesn't work, similiary ScrollTop() to div don't work too.

Replace longDiv with your div id.
<div id="longDiv">Bla bla bla</div>
<button>Scroll to top</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('#longDiv').scrollTop(0);
});
});
</script>
Working JSFiddle: https://jsfiddle.net/8hasscb6/
If you prefer it to be animated, you can use .animate():
<script>
$(document).ready(function() {
$('button').click(function() {
$('#longDiv').animate({ scrollTop: "0px" });
});
});
</script>
JSFiddle: https://jsfiddle.net/8hasscb6/1/

Try this
<a onclick="scroll(0,0)">
This should go to top

Related

Using scrollto horizontally inside a div not in the window

I have a horizontal timeline inside a scrollable div and I want to scroll it depending on the date it has.
I've created a <span> tag to identify where the div should scroll to. Basically, when it has a class="scrollTo", the scroll should move to there, without moving the whole window. It should scroll only the div.
I tried some suggestion from here, but I don't know if I am doing it right.
I used the following code:
$(".timeLineContainer").animate({
scrollTop: $(".timeLineContainer").scrollTop() +
($(".scrollTo").offset().top - $(".timeLineContainer").offset().top)
});
Here is my code in JSFiddle:
https://jsfiddle.net/douglasbrca/j2o546wr/2/
Any suggestion based on the code above?
Ok so with this :
Fiddle : https://jsfiddle.net/j2o546wr/6/
Js:
$(document).ready(function(){
if($(".scrollTo").length > 0){
$(".timeLineContainer").animate({scrollLeft: $(".timeLineContainer").scrollLeft() + ($(".scrollTo").offset().left - $(".timeLineContainer").offset().left)});
}
});

Scroll to div on clicking the div

Here is the fiddle link https://jsfiddle.net/hitech0101/5vhdm5hy/
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'})
});
In the fiddle, i am using jquery to convert the horizontal blocks into vertical blocks. I have changed the block color from red to blue when the block is clicked. When i click a particular block i would the scroll to move to the location of the block in the vertical view. I have tried jquery's scrollTop() method but still could not get it working the way i wanted it to. Please help.
The fiddle is partial representation of the webpage i am working on. There is more content on the original page which i have excluded. The maincontainer is the second container on the page.
No JavaScript necessary. You can specify an element in an anchor's href and it'll scroll it to the top of the window, including itself.
Wrap the div in an anchor or just use the anchor tag itself, they're both wrappers.
<a href="#scrollToMe">
<div id="scrollToMe"></div>
</a>
Just remember that it can only scroll the element into view to the best of its ability, if the item is at the bottom of the parent element the scroll will hit the bottom and it won't be able to go any further.
$(this).get(0).scrollIntoView();
Add this line into the .click function.
Fiddle
I suggest you get the offset top value and animate the #maincontainer to that position
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'});
/*below is what i was talking about*/
var pos = $(this).offset();
$('#mainContainer').animate({ scrollTop: pos.top });
});
$(document).on("click", ".block", function() {
var _body_html = $('html, body');
var _scroll_to = $('.scroll-to');
var _top = _scroll_to.offset().top;
_body_html.animate({
scrollTop: _top
}, 1000);
setTimeout(function() {
_body_html.finish();
}, 1000);
});

How To Add An Arrow That Pushes Page Down? [duplicate]

This question already has answers here:
Smooth scroll to div id jQuery
(16 answers)
Closed 7 years ago.
I'm creating a site and it looks similar to this site. As you can see in the example that there is an animated arrow that if you press moves you down. This way is a bit sudden so an animated moving down would be cool. I'm more focused on the page moving down in a nice way rather than the animated arrow. Do you know how to get this done in html and css? If this can't be done with html or css than jQuery?
Example:
http://www.fhoke.com
<button id="test"> Test<button>
for scrolling to top:
$( "#test" ).click(function() {
var x = $(window).scrollTop();
$(window).scrollTop(x+150);
});
for down:
$( "#test" ).click(function() {
scrolled=scrolled-300;
$("body").animate({
scrollTop: scrolled
});
});

Scroll to a specific div

I have few divs .posts which have a attr data-id which corresponds to the mysql DB id.
<div class="posts" data-id="1"></div>
<div class="posts" data-id="2"></div>
Now if I want to scroll to a specific div which I am only known to the data-id.
How will I scroll to it?.
My JSFiddle is here.
Can anyone give an example along with a JSFiddle?
You use link anchors and JQuery.
Just give your link the class "scroll" and use the following code in the head:
$(function() {
// Listen for a click event on the anchor
$('.scroll').click(function(event) {
// Prevent the jump to target that is default browser behavior
event.preventDefault();
// Animate the scrollTop property of the scrollParent to the top offset
// of the target element. In this case, we have an animation duration of 1000ms(1 second).
$('html').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
});
/* Just for demo purposes */
.post {
margin: 100vh 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Go To Div 8
<div class="post" id="anchor">Scroll to me</div>
You can use jQuery.ScrollTo plugin: https://github.com/flesler/jquery.scrollTo
In this link you can find demos http://demos.flesler.com/jquery/scrollTo/
$(function() {
$('body').scrollTo($('div[data-id=1]'), 1000); //scroll to div 1
});
HTML:
<div class="posts" data-id="1"></div>
You don't need javascript if you have an anchor with a name.
Div to post 8 scrolls to <a name="post8"></a>
I'm seeing a lot of jQuery and Javascript in here, and simple CSS is here to help!
html,body {
scroll-behavior: smooth;
}
To put this in action, use a link and give it an href with the id of the element you're scrolling to:
Section One
<div id="sectionOne">
<h2>Section One</h2>
</div>
Not all browsers however support the scroll-behavior property, in which case I'd recommend the selected answer near the top ;)
Animate to last item with specific attribute
$('html').animate({
scrollTop: $('className:last[data-id]').offset().top - 100
}, 500);
I think this would help $(".element").attr("any-attribute-of-ur-elem");
In your case it would look like: $(".post").attr("data-id")
And you can scrollTo that posts.
try this:
$(document).ready(function (){
$("#button").click(function (){
$('html, body').animate({
scrollTop: $(".post[data-id="+yourID+"]").offset().top
}, 2000);
});
});

Div height doesn't always return the same number [duplicate]

This question already has answers here:
jQuery height() returns 0 on a visible div - why?
(5 answers)
Closed 9 years ago.
I am using
$(document).ready(function(){
var height = $('#home_sidebar').height();
});
to get the height of my home_sidebar div. The code is only executed when the page is fully loaded. However it returns different numbers from time to time. For example, sometimes it says 1699, sometimes it returns 1398.
There are "img" and "a" tags inside this div, what could possibly go wrong?
By the way, I am implementing a docking div on http://www.city365.ca. If you see the colored icons stick to the top of the page, it is working.
If you see the colored icons docking at the bottom of the page, it is not working.
use $(window).load() to make sure your images are loaded
$(window).load(function(){
var height = $('#home_sidebar').height();
});
Try this:
$(window).on('load', function(){
var height = $('#home_sidebar').height();
});
$(window).on('load'... will wait for the images to load before firing.
I would also state another (obvious) possibility which is that you resized the window between loads. Just to be complete :)

Categories

Resources