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.
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 :-
jQuery Back to Top |
<!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:
No comments: