Add "Back to Top" button in Octopress

Source: Internet
Author: User

You can quickly return to the top of the page by using the "back to Front" button. The configuration is modified by the octopress theme style. But doing so does not make the configuration possible. As a result, the latest version of the configuration is found in the GitHub repository of the suspect author 812lcl.

JavaScripts Script

Create a new file source/javascripts/top.js. The latest version of it is in:

Https://github.com/812lcl/812lcl.github.com/blob/source/source/javascripts/top.js

Display button

The display button requires a new source/_includes/custom/totop.html. The latest version of it is in: https://github.com/812lcl/812lcl.github.com/blob/source/source/_includes/custom/totop.html

This specifies the file name of the called Javscripts, the name of the button picture, and so on, such as right:180px specifies the button from the right side of the page example, you can adjust it to adjust the display effect.

Button picture

From the above you can see that the button file should be in Source/images. Save a top.png picture here, you can show the button.

In the beginning, the picture was placed in the images instead of the source/images, causing only the "back top" to appear.

Original link Address: http://pangyi.github.io/blog/20150125/zai-octopresszhong-zeng-jia-fan-hui-ding-bu-an-niu/
Written by pangyi?posted at Http://pangyi.github.io

Add "Back to Top" button in Octopress

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.