There is such a script to increase / decrease the value in the input http://jsfiddle.net/aEYMb/30/
$(function () { $('.plus-button').click(function () { var input = $(this).parents('.number').find('.form-field-1'); if (input.val().length === 0){ input.val('0'); } var count = input.val(); count++; input.val(count); }); $('.minus-button').click(function () { var input = $(this).parents('.number').find('.form-field-1'); if (input.val().length !== 0){ var count = input.val(); count--; if (count === 0) { input.val(''); } else { input.val(count); } } }); }); body { background: #000; } ol, ul { list-style: none; } .sorts { background: url(../images/bg_sorts.png) top left repeat-x; position: relative; height: 248px; } .sorts-1 { width: 960px; } .sorts-list { overflow: hidden; padding-top: 32px; } .sorts-list > li { float: left; width: 162px; } .number { overflow: hidden; padding-top: 8px; } .form-field-1 { background: url(http://i.imgur.com/k7aNJIh.png) center top no-repeat; width: 31px; height: 21px; font-size: 14px; color: #403a34; text-align: center; padding: 0 2px; } .minus-button, .plus-button { display: inline-block; text-decoration: none; width: 23px; height: 23px; color: #bab3af; text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.50); font-size: 20px; font-family: Arial, sans-serif; text-align: center; } .minus-button { background: url(http://i.imgur.com/MbI0Vjq.png) center top no-repeat; margin-right: 6px; } .plus-button { background: url(http://i.imgur.com/MbI0Vjq.png) center top no-repeat; margin-left: 6px; } .rate { width: 110px; margin: 0 auto; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <form name="" method="post" action="#" enctype="multipart/form-data" class="feedback-form-1"> <fieldset> <div class="sorts sorts-1"> <ul class="sorts-list"> <li class="sort-1"> <div class="rate"> <div class="number"> <a class="minus-button" href="#">–</a> <input class="form-field-1" type="text" name="sort-1" value="" /><a class="plus-button" href="#">+</a> </div> </div> </li> <li class="sort-2"> <div class="rate"> <div class="number"> <a class="minus-button" href="#">–</a> <input class="form-field-1" type="text" name="sort-2" value="" /><a class="plus-button" href="#">+</a> </div> </div> </li> <li class="sort-3"> <div class="rate"> <div class="number"> <a class="minus-button" href="#">–</a> <input class="form-field-1" type="text" name="sort-3" value="" /><a class="plus-button" href="#">+</a> </div> </div> </li> </ul> </div> <!-- sorts-1 --> But on the page when you click on the link page scrolls up.
Can I replace <a> with some other element, instead of replacing <a> avoid scrolling the page?
