Table of Contents Autoscroll Gadget. ~ The Blog Doctor.

Table of Contents Autoscroll Gadget.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Here is another gadget for those who wish to display all their posts in as little space as possible. The Random Rotating Post Gadget shows only one post at a time. The Table of Contents Autoscroll gadget shows all posts in you blog scrolling automatically in a small place. You can see it in action above the posts in Tips for Bloggers. (Wait for page to load fully) See picture below :

The Table of Contents is from Beautifulbeta. To save space I have added autoscrolling function to it. Features of the gadget are : .....................


  • 1. Shows all Posts in blog.
  • 2. Scrolls the posts list upwards automatically.
  • 3. Mouseover will pause the autoscrolling.
  • 4. Saves space.


To install it in your blog follow these steps :

1. Login at

2. Click Layouts link on Dashboard.

3. Click 'Add Gadget' link in sidebar on Layout>>Page Elements subtab.

4. In popup window scroll down and click Html Javascript gadget.

5. In Contents paste the following code :

<script type="text/javascript">
// <!--
var speed = 2;
function init(){
var el = document.getElementById("marquee_replacement"); = 'hidden';
var go = 0;
function scrollFromBottom(){
var el = document.getElementById("marquee_replacement");
if(el.scrollTop >= el.scrollHeight-150){
el.scrollTop = 0;
el.scrollTop = el.scrollTop + speed;
if(go == 0){
function stop(){
go = 1;
function startit(){
go = 0;
// -->
<script style="text/javascript" src=""></script>
<script src=""></script>
<script type="text/javascript">showToc();</script>
<style type="text/css">
border:1px solid #000;
#marquee_replacement p.spacer{
<div id="marquee_replacement" onmouseover="stop();" onmouseout="startit();">
<div id="toc">
</div></div><div id="feedGadget">Gadget by <a href="" target="_blank">The Blog Doctor</a>.</div>

In above code change "MYBLOG" to the url (subdomain) of your blogspot and save.



tomat said...

Hi, Vin. It's a very interesting post, as usually.

I have a modified versión of the Toc gadget from Beautiful Beta so I'd like to know which is the code you have added in order to make the new autoscroll.

Another doubt I have is if is it possible to maintain static the header of the Toc in order to use the sort/filter capabilities it has that are lost (hidden at the top) with the autoscroll.

And the last one: is it posible to begin again the autoscroll cycle after reaching the end of the posts having a continuous scrolling?

Vin said...


You can get the scrolling code here.

The rest will have to be investigated.

Ginger said...

I've done everything you requested to put it on my blog, but all I'm getting is an empty white box. =(
Any idea what's wrong?

Vin said...


You do not appear to have any posts on your blog! Login at and click New Post button on Dashboard to create posts.

kostasg said...

it remains blank Vin
I tried the rorating totle gadget too.
The same thing....pure white

Vin said...


Where is it exactly in the blog? I do not see it?

kostasg said...

Sorry .I removed it cause the gap as too big for me to bear it :)
I'll put it back on for you to check it out.

Devasish said...


Do u've any similar style wth javascript?

Vin said...


It is already in Javascript!! Look at the code in above post.

overload said...

I too got a white screen.Is it because of the feeds? Im using RSS. Please help.

Vin said...

overload ,

Try it again. Also check out this Google Gadget which lists ALL posts in blog.

Evergreen Songs said...

Used this on my blog and works great

Noname said...


Hi, i would like to ask. Wasn't the onmouseout supposed to be ="start();" ?


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.