How to realize the return to the top button and scroll scrolling function in jQuery

This article mainly explains the "jQuery how to achieve the back to the top button and scroll scrolling function", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "jQuery how to achieve the back top button and scroll scrolling function" bar!

JQuery script:

$(function () {var scrollDiv = document.createElement ('div'); $(scrollDiv) .attr (' id', 'toTop'). Html (' ^ return to the top'). AppendTo ('body'); $(window) .appendTo () {if ($(this). ScrollTop ()! = 0) {$(' # toTop'). FadeIn () } else {$('# toTop'). FadeOut ();}); $('# toTop') .click (function () {$('body,html') .animate ({scrollTop: 0}, 800);})})

CSS style:

# toTop {width: 100px; z-index: 10; border: 1px solid # 333; background: # 121212; text-align: center; padding: 5px; position: fixed; bottom: 0px; right: 0px; cursor: pointer; display: none; color: # fff; text-transform: lowercase; font-size: 0.9em;}

Scrolling operation with iframe framework:

Thank you for reading, the above is the "jQuery how to achieve back to the top button and scroll scrolling function" content, after the study of this article, I believe you how to achieve jQuery return to the top button and scroll scrolling function of this problem has a deeper understanding, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!