CODEWITHSUNDEEP
javascriptjqueryhtml
Rogero Wisehombre
Rogero Wisehombre

Reputation: 133

Slow transition to same page anchor with window.location

I have this code that is fully working. When I click a radio button it redirects the user to the next part of the web page (that is to: div id="profiel")

<script>
    $("input[name='gender']").change(function(){
      window.location = "#profiel";
  });
</script>

The radio button:

    <input type="radio" id="female" name="gender">    
    <input type="radio" id="male" name="gender">

I want the transition to the anchor tag to go slow. So that the page slowly scrolls down. Now it instantly goes to the #profiel section. I have seen this before I just do not know how to do it myself.

Upvotes: 0

Views: 288

Answers (2)

Aniketh Saha
Aniketh Saha

Reputation: 913

There is a jquery plugin name Nicescroll you can use that The code will be

$("input[name=gender]").change(function(){
  $('html').nicescroll()
  window.location = "#profiel";

});

Or if you want I guess adding transition :1s all ease-in-out in you css body or html styling may help but I am not sure for this but that nicescroll plugin will work for sure

Upvotes: 0

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Try this out:

<script>
    $("input[name='gender']").change(function(){
        $('html, body').animate({
            scrollTop: $("#profiel").offset().top
        }, 2000);
  });
</script>

Upvotes: 2

Related Questions