Radio Button Causes Browser to Jump to the Top

Radio button causes browser to jump to the top

Interesting. I don't know exactly why it behaves that way, but curing the unwanted behavior is easy: exchange the CSS top and left values of the radio inputs for visibility: hidden.

Like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
    #content {
        width: 500px;
    }
    .rdbut {
        margin:0px;
    }
    .rdbut label {
        float:left;
        width:65px;
        margin:4px;
        background-color:#EFEFEF;
        border:none;
        overflow:auto;
        display:inline;
    }
    .rdbut label span {
        text-align:center;
        font-size: 12px;
        padding:3px 8px;
        display:block;
    }
    .rdbut label input {
        position:absolute;
        t/op: -9999px;
        l/eft: -9999px;
        visibility: hidden;
    }
    .rdbut input:checked + span {
        background-color:#404040;
        color:#F7F7F7;
    }
    .rdbut .colour {
        background-color:#FF8E22;
        color:#ffffff;
    }
    </style>
</head>
<body>
    <div id="content">
        <p>"Lorem ipsum" goes here.
        </p>
        <div class="rdbut">
            <label class="colour"><input id="option-AVGANT1Y2PC" type="radio" name="Multi-licence" value="1 Year 2 PC|+23.99|0" checked="checked" />
            <span>£24.99</span></label>
        </div>
        <div class="rdbut">
            <label class="colour"><input id="option-AVGANT2Y2PC" type="radio" name="Multi-licence" value="2 Year 2 PC|+34.00|0" checked="checked" />
            <span>£35.00</span></label>
        </div>
        <div class="rdbut">
            <label class="colour"><input id="option-AVGANT1Y2PC" type="radio" name="Multi-licence" value="1 Year 2 PC|+23.99|0" checked="checked" />
            <span>£24.99</span></label>
        </div>
    </div>
</body>
</html>

Updated JSFiddle here: http://jsfiddle.net/XkQ7T/1/.

.

By the way, setting checked on every radio button is no use - only the last one is actually checked. And it invalidates your code. Also, you need form tags around the group of radio inputs.

How to prevent page jumps when checkbox's state changes?

Check this. Use visibility, the element will still in document.

How can I prevent the browser from scrolling on top of the page when clicking the checkbox?

How can I prevent the browser from scrolling on top of the page when clicking the checkbox?

The problem is this rule:

#ck-button label input {
  position:absolute;
  top:-20px;
}

When you click on a label the browser tries to focus the related input. In your case the checkbox element is lying at the top of the page, even outside the viewport – so Firefox tries to scroll there.

You can solve it like this by adding:

#ck-button label {
  display: block;
  position: relative;
  overflow: hidden;
}

Demo

Try before buy

Alternative

Heisenberg points out a problem in his answer which can occur when using extreme values. Unfortunately the proposed idea has the same quirk as the one shown above.

So an alternative solution is simply to hide the input. The functionality is not affected.

CSS

#ck-button label input {
  display: none;
}

Demo

Try before buy

How to set scroll position to the level of checked radio button?

When the page loads you can filter through all the radio buttons and find the one that is checked. When you have that button you can just scroll to it with jQuery.

This is the code html:

<div id="radioContainer">
    <input type="radio" name="distance" value="1"/>1<br>
    <input type="radio" name="distance" value="2"/>2<br>
    <input type="radio" name="distance" value="3"/>3<br>
    <input type="radio" name="distance" value="4"/>4<br>
    <input type="radio" name="distance" value="5"/>5<br>
    <input checked type="radio" name="distance" value="6"/>7<br>
    <input type="radio" name="distance" value="8"/>8<br>
    <input type="radio" name="distance" value="9"/>10<br>
</div>

and the JS:

$(document).ready(function() {
    $('#radioContainer > input').each(function() {
        var radioInput = $(this);
        if(radioInput.is(':checked')) {
            $('#radioContainer').animate({
                scrollTop: radioInput.offset().top
            }, 2000);
        }
    });
});

Source for the jQuery scroll to animation: jQuery scroll to element

JSFiddle: http://jsfiddle.net/ct346z65/4/

How to get a Div to move randomly with radio buttons?

This is the way I would probably do it, then you can tweak this as you need. Also, remember when using animation to make the css position set to absolute. A working fiddle can be found here

CSS

div.a {
width: 50px;
height:50px;
background-color:red;
position:absolute;
}

HTML

<h3>Click</h3>
Small Leap: <input type="radio" id="smallRadio"><br>
Medium Leap: <input type="radio" id="mediumRadio"><br>
Big Leap: <input type="radio" id="largeRadio"><br>

<div class='a' id="mainDiv"></div>

Javascript

$(document).on('change', 'input:radio', function(){
  var $thisRadio = $(this); //gives us a jQuery instance of current radio that triggered the event
    //update functions
  updateDivPosition($thisRadio);
});

function updateDivPosition($target)
{
   var $div = $('#mainDiv');
   var newLeft = 0;
   var newTop = 0;
   var currentPosition = $div.position();

   switch($target.attr("id"))
   {
      case "smallRadio":
            newTop = currentPosition.top + 10;
            newLeft = currentPosition.left + 10;

         break;
      case "mediumRadio":
            newTop = currentPosition.top + 30;
            newLeft = currentPosition.left + 30;      

          break;          
      case "largeRadio":
            newTop = currentPosition.top + 50;
            newLeft = currentPosition.left + 50;  

         break;

   }
   newTop = newTop + "px";
   newLeft = newLeft + "px";

   $div.animate({"left": newLeft, "top":newTop},1000);   
}

Radio Button Causes Browser to Jump to the Top