Home/ Questions/Q 7910549
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T12:54:14+00:00

This is the code that I got some where, I can not find the

  • 0

This is the code that I got some where, I can not find the original site.

jquery-1.3.1.min.js

jquery.scrollTo.js

I am running it on this site: http://www.atomicorchid.co.za/Atomic_Orchid/new/

It only scrolls 5 divs?

This is the original code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroll vertically</title>

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

<script>

$(document).ready(function() {

$('a.panel').click(function () {

    $('a.panel').removeClass('selected');
    $(this).addClass('selected');

    current = $(this);

    $('#wrapper').scrollTo($(this).attr('href'), 800);      

    return false;
});

$(window).resize(function () {
    resizePanel();
});

});

function resizePanel() {

width = $(window).width();
height = $(window).height();

mask_height = height * $('.item').length;

$('#debug').html(width  + ' ' + height + ' ' + mask_height);

$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: width, height: mask_height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);

}

</script>

<style>

body {
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}

#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
background-color:#ccc;
overflow:hidden;
}


#mask {
    width:100%;
    height:500%;
    overflow:hidden;
    background-color:#eee;
}

.item {
    width:100%;
    height:20%;
    display:block;
    background-color:#ddd;
}   


.content {
    width:400px;
    height:300px;
    top:20%;
    margin:0 auto;
    background-color:#aaa;
    position:relative;
}

.selected {
    background:#fff;
    font-weight:700;
}

</style>
</head>
<body>


<div id="wrapper">

<div id="mask">

<div id="item1" class="item">
<div class="content">item1 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>

<div id="item2" class="item">
<a name="item2"></a>
<div class="content">item2 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>

<div id="item3" class="item">
<a name="item3"></a>
<div class="content">item3 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>

<div id="item4" class="item">
<a name="item4"></a>
<div class="content">item4 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>

<div id="item5" class="item">
<a name="item5"></a>
<div class="content">item5 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>

<div id="item6" class="item">
<a name="item6"></a>
<div class="content">item6 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>

</div>

</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After 1 hour deep study just found the answer. Remove overflow:hidden; from #mask in the CSS. Worked fine on the jsfiddle example and your website also.

    • 0