By default when you have fragment links like this:
<a href="/some-url#some-fragment">some text</a>
the browser just, scrolls down to that fragment instantly. How do i program it to smoothly move down to that fragment with standard JS?
Here's an example:
Example (To see the working example, just click on the 3 arrows inside the 3 circles and watch the smooth animated scrolling)
okay, i think i found my answer, posting it here to help others with the similar doubt:
<html>
<head>
<script type="text/javascript">
var singleton = {};
var timeout = singleton;
window.onscroll = windowScroll;
function windowScroll ()
{
var toTop = document.getElementById('toTop');
toTop.style.display = ((window.scrollY > 0) ? "block" : "none");
}
function scrollStep ()
{
var y1 = window.scrollY - 1000;
window.scrollTo(0, y1);
if (y1 > 0)
{
timeout = window.setTimeout(scrollStep, 100);
}
else if (timeout != singleton)
{
window.clearTimeout(timeout);
}
}
</script>
<style type="text/css">
#toTop {
display: block;
position: fixed;
bottom: 20px;
right: 20px;
font-size: 48px;
}
#toTop {
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
opacity: 0.5;
display: none;
cursor: pointer;
}
#toTop:hover {
opacity: 1;
}
</style>
</head>
<body>
<p id="top">your text here</p>
<a href="#top" onclick="scrollStep(); return false" id="toTop"
><img src="images/go-to-top.png" alt="Go to top" title="Go to top"></a>
</body>
</html>
Well you should try something like this
$('html,body').animate({
scrollTop:$("#ctl00_ctl00_ContentPlaceHolder1_Conten
tPlaceHolder1_txtcomment").offset().top
},'slow');
where *#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_txtcomment* is the id where you want to move or scroll
another approch is to put this in a function
function scrollme() {
$('html,body').animate({
scrollTop:$("#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_txtcomment").offset().top
},'slow');
} <a onclick="javascript:scrollme();">some text</a>
I hope this will help you.
Regards..:)
[Updated]
A URI hash is a great way to make JavaScript/AJAX pages with dynamic content bookmarkable. It can be used in a manner similar to query strings, but changes will not cause a new page request. This allows you to store data in the URI which can be read and changed by JavaScript without ever reloading the page.
For the uninitiated, a URI location hash is everything after the # sign in the URI:
http://domain.com/page.html#i-am-a-hash A side note: URI hashes are not transferred back to the server, you can only access them client-side.
check this blog
http://ole.michelsen.dk/blog/using-uri-hash-instead-of-query-strings/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.