HTML Anchor Link - Offseting Position - javascript

I have Created an Example Page Below:
http://glustik.com/glustik2/index.html
When you Click the First Two Links you can see how the Anchors Position to the top and not down (250 or so Pixels).
Is there a way to summon the anchors to a certain location on the window?
Thanks.

You can use the jQuery animate function to set the scrollTop to the wanted position.
$("html, body").animate({ scrollTop: $("#your-div").offset().top - YourHeadersHeight }, 500);

Related

jQuery jump to element

I've something like an image gallery on my site. By clicking an image this one will scale up. Sometimes the enlargement contains that a part of the image is out of the viewport. Is it possible that the complete site jumps to the top area of the image by clicking it?
You can have a look here!
Try this:
$("div.image img").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 2000);
});
It should create a click event for all the images inside the div element with a class "image", which I can see in your code, and then animate (slowly, in 2000 miliseconds, aka 2 seconds) scroll to it's offset from the top of the page.
You have more information in this 5 year old question on stackoverflow.com
edit:
if you need some adjustment, you can edit this line
scrollTop: $(this).offset().top - 88
and the page will scroll 88px less than the image position, which you could find helpful because of your floating menu.

How to scroll a webpage vertically in jquery?

I want to write an Jquery or JS script to scroll down a given page if it has the vertical scrollbar. This is to automate the web page navigation using the mouse wheel, so I should be able to animate it with time.
I was reading the web but seems that to do something like this you need to know an element name. Is it possible without knowing any element name? Something like $(document).scrollDown(speed)?
You could animate scrollTop property of html and body elements, like this:
$(window).load(function() {
$("html, body").animate({ scrollTop: yPosition }, 1000);
});
In this snippet, yPosition represents the height you want to reach, and 1000 controls the speed.
To detect if the page has a vertical scroll bar you could do:
if((document).height() > (window).height())
{
$('html').animate({scrollTop : ((document).height()},'slow');
}

Jump to the bottom of the page with jQuery - Without animation

How can I jump to the bottom of the page with jQuery?
I don't want a smoother animation, just to 'jump'. All the other questions on this site I found seem to involve an animation.
This will do
$('html, body').scrollTop( $(document).height() );
scrollTop( vHeight );
WITH ANIMATION
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
WITHOUT ANIMATION
$('html, body').scrollTop( $(document).height() );
$('#smthn').scrollTop(99999999999);
99999999999 is the max input for jquery and it can take element to the last scrolling position.
You can use an anchor tag for this, no need of jquery.
Put an anchor tag at the bottom of the page just before </body> tag. such as
<a name="pageend"></a>
And, from where on the page you can jump to the bottom, put another anchor tag just like this.
Jump to page end

Scroll textarea upwards/downwards on clicking prev and next hyperlinks in web page

I want to show a hyperlinks "prev" "next".
Clicking on "next hyperlink should scroll textarea to next location.
Clicking on "prev" hyperlink should scroll textarea to previous location.
The locations to jump in textarea are known e.g. line: 10, then line 40 , 50 , 70 , 101 , ....
textarea has a fixed height.
You can use pagination.
I prefer using styled pagination with jquery-
http://flaviusmatis.github.com/simplePagination.js/#page-20
This will help you sure.
As per need you want to go next, you need to give position for your current text-block or you can use margin property.
Try this out :- http://jsfiddle.net/MCK8g/
$(function(){
$("#prev").on("click",function(){
$("html, body").animate({ scrollTop: -500 + window.pageYOffset }, 600);
});
$("#next").on("click",function(){
$("html, body").animate({ scrollTop: 500 + window.pageYOffset }, 600);
});
});
Change the factor "500" depending upon the required scroll.
Googled, first hit..
function scrollToLine($textarea, lineNumber) {
var lineHeight = parseInt($textarea.css('line-height'));
$textarea.scrollTop(lineNumber * lineHeight);
}
https://makandracards.com/makandra/8247-scroll-a-textarea-to-a-given-line-with-jquery
(the solution is using jQuery)
as mentioned their it only works if the line-height is set in pixels,
if not, a link with a workaround is also given in the post, see
jQuery: scroll textarea to given position

Scroll height in a DIV

As shown in the image, how can i find the scrolled height relative to DIV not to window
Edit
Uploaded another image for more clearity
You should use .position() instead of .offset(). That's the offset relative to the parent. (in jQuery of course)
documentation
I'm actually not sure if this is what you are looking for...
may be try to find div position and than set your body in document.ready
var position = $("divid").offset().top;
$("html, body").animate({ scrollTop: position },'slow');
Hops its helps

Categories