google-site-verification=ECX1M6_Vb39ty4VtQDXQce6wOjmPTxSettd3hTIZb9Q

Auto Scroll to Top jQuery Example

random

Auto Scroll to Top jQuery Example

Introduction
Back to Top or Scroll To Top buttons are very helpful for a websites. "Back To Top" button is used to facilitate the readers if the readers want to scroll the page up. If the webpage is too long then, it’s a good idea to provide viewers with an easy way to quickly/ automatically scroll back to the top of the page.

jQuery Scroll to top of page ButtonClick

In this jquery tutorial I will demonstrate jquery smooth scroll to anchor on page load, jquery back to top onClick, jQuery scroll to top of page, html button onclick jQuery example. Find the code snippet below :- 
auto scroll jquery horizontal,auto scroll jquery vertical,auto scroll jquery demo,auto scroll jquery example,one page smooth scroll jquery,jquery smooth scroll to anchor on page load,smooth mouse scroll jquery,jquery auto scroll
jQuery Back to Top
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo - ASP.Net - jQuery Scroll To Top Button onClick CSS Example</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <link href="css/css.css" rel="stylesheet" />

    <script>
        $(document).ready(function () {

            // hide #back-top first
            $("#back-top").hide();

            // fade in #back-top
            $(function () {
                $(window).scroll(function () {
                    if ($(this).scrollTop() > 100) {
                        $('#back-top').fadeIn();
                    } else {
                        $('#back-top').fadeOut();
                    }
                });

                // scroll body to 0px on click
                $('#back-top a').click(function () {
                    $('body,html').animate({
                        scrollTop: 0
                    }, 800);
                    return false;
                });
            });

        });
    </script>
</head>

<body id="top">
    <div id="pagewrap">
        <h1>Demo</h1>
        <h2><a href="#">Animated jQuery Scroll To Top</a></h2>
        <p class="credits"><em>by <a href="http://www.etechpulse.com">eTechpulse</a></em></p>
        <h3>20 Tips & Tricks for Writing SEO‐Friendly</h3>
        <p>
            Once you have your SEO priorities in order, consider the following tactics to make your press release
as search engine friendly as possible. 

1. Determine the best keywords for your announcement.  Depending on the news you are
issuing, they may vary from previously identified terms. 
            <br />
            <br />
            2. Online keyword tools are excellent resources for determining the correct terms.  If your
organization does not subscribe to a paid keyword service, consider these free alternatives:
            <br />
            <br />
            a. www.adwords.google.com/select/KeywordToolExternal   
b. www.keyworddiscovery.com/search.html  
c. www.blogpulse.com/trend (to determine words most often used on blogs)

3. Once keywords are determined, you may need to associate more colloquial words with
them, as company/marketing jargon isn't typically used in search.
            <br />
            <br />
            4. Use the most popular keyword phrase in the headline, which carries the most weight with
search engines, as well as in the body of the release and in hyperlinks. 
            <br />
            <br />
            5. Pick one to three relevant keywords and repeat them at least three times in the release. 
            <br />
            <br />
            6. Don’t OVER‐HYPERLINK words.  Optimizing releases for words that are not used often in the
press release can cause irrelevant results and be considered spam by some search engines. 
            <br />
            <br />

            7. Include anchor text hyperlinks in the press release that are your keywords or similar to
them.  Make sure you link these words back to the appropriate page on your website.  For
example, if you are linking a product name, link back to the product page on your site.<br />
            <br />
            8. Make sure the page you are linking back to is optimized for your chosen keywords.  If the
anchor text is “accounting software,” be sure that it is linked to a page containing
“accounting software” in the title tag and within the text on the page.
            <br />
            <br />
            9. Place your anchor text links in the first two paragraphs.  Search Engines will pick up these
words more efficiently if they are placed before the “fold” of the screen.
            <br />
            <br />
            10. Keep press releases short and concise.  Most experts agree that the “sweet spot” for an SEO‐
friendly press release is between 300 – 500 words. 
            <br />
            <br />
            11. Ensure there is a balanced keyword to press release word length ratio.  Avoid too many
keywords and hyperlinks in shorter releases, and vice versa in longer releases. 
            <br />
            <br />
            12. Include rich media content such as images and videos that will augment search engine pick
up in places such as Google Images or Google Video.  Be sure all media‐rich content is
appropriately tagged with keywords.
            <br />
            <br />
            13. Include a link (not a hyperlink) to your website.  Make sure to include the http:// of the URL. 
            <br />
            <br />
            14. If the release has a subhead, make sure it includes a keyword phrase.  Search engines give
more weight to bolded text (i.e. headline, subhead).
            <br />
            <br />
            15. Optimize your boilerplate – always include links and keywords.
            <br />
            16. Resist the tendency to shorten terms.  For example, if you are writing about your company’s
branded data management software product, you’ll be inclined to make the second mention
“the solution” or “the software.”  However, people looking in search engines will type in
“data management software.”  Repeating “data management software” as a keyword
phrase will help your release be found, while “the solution” will not.  (But, try to keep the
writing as “natural” as possible.)
            <br />
            <br />
            17. If your company or product falls into a particular industry that is often referred to by an
acronym, include both the full term and abbreviation throughout the release.  For example,
“Customer Relationship Management” should be referenced by its “full name,” and, “CRM.”
            <br />
            <br />
            18. Post all releases on their own permalinked page on your website in addition to sending it out
over wire services.
            <br />
            <br />
            19. Be consistent with keyword use both in press releases and on your website.  The website
should have a keyword density of between 2‐8%.  This tool, www.keyworddensity.com,
allows you to enter your URL and chosen keyword for a complete keyword density analysis.
            <br />
            <br />
            20. Buy Adwords for those keywords that are very difficult to get in the first page of results (i.e.
those that are more generic and colloquial, or common industry terms).  Putting this extra
cash to drive traffic to a press release could be vital to helping the impressions of the
release, increasing visibility and the possibility of greater pickup.
            <br />
            <br />
        </p>
        <p id="back-top">
            <a href="#top"><span></span>Back to Top</a>
        </p>

    </div>
</body>
</html>


CSS.css
body {
    font: .88em/150% Arial, Helvetica, sans-serif;
    margin: 30px auto;
}

h1 {
    font: bold 80%/120% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: #999;
}

h2 {
    font-size: 2.5em;
    margin: 0 0 8px;
}

h3 {
    font-size: 1.6em;
    margin: 20px 0 5px;
}

a {
    color: #69C;
    text-decoration: none;
}

    a:hover {
        color: #F30;
    }

p {
    margin: 0 0 10px;
}

em {
    font: italic 100% "Times New Roman", Times, serif;
}

.credits {
    border-bottom: solid 1px #eee;
    padding-bottom: 10px;
    margin: 0 0 30px;
}

#pagewrap {
    margin: 0 auto;
    width: 600px;
    padding-left: 150px;
    position: relative;
}

/*
Back to top button
*/
#back-top {
    position: fixed;
    bottom: 30px;
    margin-left: -150px;
}

    #back-top a {
        width: 108px;
        display: block;
        text-align: center;
        font: 11px/100% Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        text-decoration: none;
        color: #bbb;
        /* background color transition */
        -webkit-transition: 1s;
        -moz-transition: 1s;
        transition: 1s;
    }

        #back-top a:hover {
            color: #000;
        }
    /* arrow icon (span tag) */
    #back-top span {
        width: 108px;
        height: 108px;
        display: block;
        margin-bottom: 7px;
        background: #ddd url(../images/top4.jpg) no-repeat center center;
        /* rounded corners */
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        /* background color transition */
        -webkit-transition: 1s;
        -moz-transition: 1s;
        transition: 1s;
    }

    #back-top a:hover span {
        background-color: #777;
    }
Auto Scroll to Top jQuery Example Reviewed by Ravi Kumar on 5:19 PM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form

Name

Email *

Message *

Powered by Blogger.