ELEMENT, HOW TO SET SCROLLTOP POSITION IN JQUERY

With jQuery you can create excellent ways khổng lồ increase the interaction with the users. One such way is by creating a jQuery Scroll to Element feature. With this, you can create internal liên kết on your website page, và when a person clicks on any such link then he is scrolled to the specific element.This is very handy specially when the web page is quite large và with these internal links users are taken directly khổng lồ the specific topics on the page.

Bạn đang xem: Element, how to set scrolltop position in jquery


I have created this feature in my SEO Terms tutorial. You can kiểm tra it by clicking on any of the below 3 links. Once you click on them you will scrolled khổng lồ the respective topic once the page is loaded.CloakingDisavowKeywordresearch

jQuery Scroll to lớn Element Code

I have specified the internal link by starting them with # character. This # is put on the href attribute of the anchor tag.This is how it looks:
In the above jQuery Scroll to Element code it is quite clear that on clicking the Scroll khổng lồ Target liên kết the user will be scrolled lớn the div called targetDiv.Now create the jQuery Scroll features for the click event on the anchor tags. The click event is applied to only those anchor tags whose href attribute starts with #. The below jQuery code does this work:
$('a').on('click', function (e) e.preventDefault(); var targetEle = this.hash; var $targetEle = $(targetEle); $('html, body').stop().animate( 'scrollTop': $targetEle.offset().top , 800, 'swing', function () window.location.hash = targetEle; ););
That’s all for the coding part and you will see the jQuery will perform the Smooth Scroll to the target element whenever an internal link is clicked.Download liên kết is given below:DOWNLOAD
You can also give the URL of internal link on another pages so that the user is automatically scrolled to the targeted element when clicking the link.

Changing jQuery Smooth Scroll to lớn Fast Scroll

In the above jQuery Scroll lớn Element Code you will see that I have given 800 to lớn the jQuery Animate function ($(‘html, body’).stop().animate()). This 800 is the time in milliseconds for the scroll to lớn complete.If you change it lớn a smaller value lượt thích 100 then the jQuery Smooth Scroll will change to lớn a Fast Scroll.

Xem thêm: Top 10 Phần Mềm Erp Là Gì? Tìm Hiểu Các Phần Mềm Erp Phổ Biến Hiện Nay


$('html, body').stop().animate( 'scrollTop': $targetEle.offset().top, 100, 'swing', function () window.location.hash = targetEle;);
You will see on clicking the internal link, it gets added in the URL of the website page. If you don’t want this then remove the last parameter (function ()) from the animate function. The updated code will look like:
$('html, body').stop().animate( 'scrollTop': $targetEle.offset().top, 100, 'swing');

jQuery Scroll to Top

When the web page has huge amount of nội dung then you should provide a button (or image or link) at the bottom so that users can go to the vị trí cao nhất of the page by clicking it. This jQuery scrollTop feature can be created by just a single line of code.The jQuery Scroll khổng lồ Top code is given below:Scroll khổng lồ TopClicking the above anchor will scroll user khổng lồ the top.
$('#top').click(function () $("html, body").animate( scrollTop: 0 , 600); return false;);
Related Article – Create jQuery Infinite Scroll feature in your website and change the numbered paging to tự động paging.
SHARE THIS ARTICLE
*
Integration Guide – How to lớn send SMS with Twilio in ASP.NET và C#
*
First ASP.NET bộ vi xử lý core 6.0 MVC Application
*
Creating jQuery Expand Collapse Panels In HTML with “minimum” codes

ABOUT THE AUTHOR

I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you.

HELLO EVERYONE

Welcome to obatambeienwasirherbal.com - A Programming Tutorial Website. It is used by millions of people around the world to lớn learn và explore about ASP.NET Core, Blazor, jQuery, JavaScript, Docker, Kubernetes & other topics.

SUBSCRIBE khổng lồ NEWSLETTER

Enter your e-mail address to subscribe lớn this blog and receive notifications of new posts by emailJoin 90K other subscribers

MOST READ TOPICS

Learn ASP.NET vi xử lý core with Tutorials for Beginners khổng lồ Advanced CodersjQuery Tutorials from Zero to lớn HeroBlazorDocker