jQuery Cat Scrolling Progress Bar

Add-ons

2026-07-25 23:18 2 次浏览 • 0 次下载 39.4KB

Plugin Description: jQuery cat-themed scrolling progress bar for quickly navigating to the top or bottom of a document, along with several other handy features

Last updated: 2021-02-01 00:09:31

Changelog:Added automatic table of contents generation for quick navigation

When multiple neko scroll instances exist on one page, you need to set nekoname to distinguish them. However, it is recommended to use only one neko scroll instance per page to avoid issues such as node name conflicts. This limitation remains mainly because I haven't bothered to modify the code.

nekonameEssentially an ID, defaults to neko

Default (remove the comments below and comment out the others to see the effect)

1	`//$("#myscoll").nekoScroll();`

Partially customized

$("#myscoll").nekoScroll({
    blog_body: ".blog-body", // Parent element of all table of contents headings, for better positioning of the table of contents. Examples: .classname, #idname, tagname. Defaults to the body tag. It is recommended to set this option separately instead of using the default.
    catalog_item: ".catalog-item", // Selector for table of contents headings, used to identify blog post headings. Examples: .classname, #idname, tagname. Defaults to the h3 tag. It is recommended to set this option separately instead of using the default.
    readColor: "red", // Color of table of contents entries for content that has already been read
    readColor: "#70a1ff", // Color of table of contents entries for content that has already been read. Defaults to #109DFF
    unreadColor: "#57606f" // Color of table of contents entries for unread content. Defaults to #2f3542
});

Custom (remove the comments below and comment out the others to see the effect)

$("#myscoll1").nekoScroll({
    nekoname:'neko1', // nekoname, equivalent to an ID
    nekoImg:'img/cat.png', // Background image for neko
    scImg:"img/rope1.png", // Background image for the rope
    bgcolor:'#1e90ff', // Background color, effective when no rope background image is provided
    zoom:0.9, // Rope length scaling value
    endMsg:'It's over', // Dialog information after scrolling to the bottom
    hoverMsg:'Hello~ Meow', // Dialog information when the mouse hovers over neko
    right:'100px', // Distance from the right edge of the page
    fontFamily:'KaiTi', // Dialog font
    fontSize:'14px', // Dialog font size
    color:'#1e90ff', // Dialog font color
    scroWidth:'8px', // Rope width
    z_index:100, // No explanation needed, right?
    during:1200, // Duration of scrolling from top to bottom
    blog_body:".blog-body", // Parent node of all directory headings, for better directory positioning, such as .classname, #idname, tagname. Defaults to the body tag. It is recommended not to use the default; preferably set this option to another element
    catalog_item:".catalog-item", // Selector for table of contents headings, used to identify blog post headings. Examples: .classname, #idname, tagname. Defaults to the h3 tag. It is recommended to set this option separately instead of using the default.
    readColor:"red", // Color of table of contents entries for content that has already been read
    unreadColor:"black" // Directory color for unread content
});

Last updated: 2021-01-19 21:21:48

// Default 
$("#myscoll").nekoScroll();
// Custom 
$("#myscoll1").nekoScroll({
    nekoname: 'neko1',
    // nekoname, equivalent to an ID 
    nekoImg: 'img/cat.png',
    // Neko background image scImg:"img/rope1.png", 
    // Background image for the rope 
    bgcolor: '#1e90ff',
    // Background color, effective when no rope background image is provided 
    zoom: 0.9, // Rope length scaling value 
    endMsg: 'It's over', // Dialog information after scrolling to the bottom 
    hoverMsg: 'Hello~ Meow', // Dialog information when the mouse hovers over neko 
    right: '200px', // Distance from the right edge of the page 
    fontFamily: 'KaiTi', // Dialog font
    fontSize: '14px', // Dialog font size 
    color: '#1e90ff', // Dialog font color 
    scroWidth: '8px', // Rope width 
    z_index: 100, // No explanation needed, right? 
    during: 1200 // Duration of scrolling from top to bottom
});

You can download the source files for details