Simple “scroll down / down” effect with minimal markup and hash tags

Question

I make the site on one page with the classic navigation at the top. Right now I have links configured as hash tags to navigate the page:

<nav> <a href="#about">About</a> </nav> ... <section id="about">...</section> 

Obviously this works, but the transition to the about section is instantaneous rather than gradual. I am looking for an extremely simple implementation to make a gradual transition. I don't want anything fancy. There is no axis, displacement or any other parameters. I just want the scroll transition to be gradual. The only setting I want is the time it takes to complete the scroll. In addition, I want to practically not change my markup. I saw several javascript plugins that require you to use anchor tags to set locations in an html document - I don't want that. This site looks promising, but I don’t know how to set it up. There is no demo, so I can’t figure out how to configure it. I am not so literate in Javascript. In addition, the ScrollTo plugin for jQuery is too complicated. I am ready to use a plugin with many options, but I just do not want the options to stop me from understanding how to configure it.

Any help would be greatly appreciated!

Answer 1

This is the best way I have found for this - it just uses regular anchors, but extends their functionality

 $('a').click(function() { var elementClicked = $(this).attr("href"); var destination = $(elementClicked).offset().top; $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-15}, 500); }); 

Here is a live example

Answer 2

I used direct jquery to do this.

I had a link like this →

 <a href="1" class="scrolling">Go to 1</a> 

then using jquery it will scroll down to a div with another anchor with identifier "1"

 $("a.scrolling").click(function(e) { e.preventDefault(); goToByScroll($(this).attr("href")); }); function goToByScroll(id) { $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); } 

Answer 3

There ScrollTo in Javascript. This is a window event. check here: https://developer.mozilla.org/en/DOM/window.scrollTo

Answer 4

I found this code over the Internet, looking for a quick way to create this scroll.

html code:

 <a href="#services">Jump to services</a> <div id="services"></div> 

JQuery Code:

 $(document).ready(function(){ $('a[href^="#"]').on('click',function (e) { e.preventDefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing', function () { window.location.hash = target; }); }); 

});

This is the source of code .