How to add go to top and go to bottom buttons Using jQuery in Blogger

The up and down buttons can be used to navigate page content up and down, especially when the home page contains many articles or when an article contains many comments. These buttons have a fadein and fadeout effect which means they will fade slightly when you scroll up or down the page, and they also have a blog up/down function.

display

You can see a live demo on my blog, the buttons are on the right

How to Position Up and Down Buttons Using jQuery Slide Effect

Step 1. Go to Templates, click on Edit HTML button

Step 2. Click anywhere in the code field and press CTRL+F to open the Blogger search box

Step 3. Copy and paste this code snippet into the search box to find it:

]]>

Step 4. ]]> top Paste this:

/* Up and down buttons with jQuery
-------------------------------------------------- --*/
.button{
padding: 7px; /* distance between border and icon */
background color: white;
border: 1px solid #CCC; /* border color */
Location: Fixed;
background: white url ( http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png ) do not repeat on top left;
background position: 50% 50%;
width: 20px; /* button width */
height: 20px; /* button height */
bottom: 280px; /* bottom distance */
right: 5px; /* switch from right to left if you want left button */
Location: Collected Now;
pointer: pointer;
border-radius: 3px 3px 3px 3px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button{
padding: 7px; /* distance between border and icon */
background color: white;
border: 1px solid #CCC; /* border color */
Location: Fixed;
background: white url ( http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png ) do not repeat on top left;
background position: 50% 50%;
width: 20px; /* button width */
height: 20px; /* button height */
bottom: 242px; /* bottom distance */
right: 5px; /* switch from right to left if you want left button */
Location: Collected Now;
pointer: pointer;
border-radius: 3px 3px 3px 3px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Note: - There are some notes on the left side in green color which explain which styles you can change.
- You can change the arrows by changing the URLs to blue
- To change the background color of the buttons, replace the white text with your color

Step 5. Now find this tag (CTRL+F):

Step 6. And above, paste the following code:

Note: If you want to remove the "Up" button, remove bold code 1 and remove 2 to remove the "Go Down" button.

Step 7 Finally, save your changes by clicking the Save Template button Enjoy!