A Pen by Angus.

index.html

Click below links to demo the effect:
<ul>
  <li><a href="#a">Scroll to (A)</a></li>
  <li><a href="#b">Scroll to (B)</a></li>
  <li><a href="#c">Scroll to (C)</a></li>
</ul>
<hr/>
<h1>First fill up the page with some text</h1>
<p>
  <a href="http://en.wikipedia.org/wiki/History_of_Hong_Kong" target="_blank">http://en.wikipedia.org/wiki/History_of_Hong_Kong</a>
</p>
<p>
  Hong Kong began as a coastal island geographically located off the southern coast of China. While pockets of settlements had taken place in the region with archaeological findings dating back thousands of years, regular written records were not made until the engagement of Imperial China and the British Colony in the territory. Starting out as a fishing village, salt production site and trading ground, it later evolved into a military port of strategic importance and eventually an international financial centre that has the world's 6th highest GDP (PPP) per capita, supporting 33% of the foreign capital flows into China.
</p>
<p>
  Archaeological findings suggesting human activity in Hong Kong date back over 30,000 years. Stone tools of the pre-historic people during the old stone age have been excavated in Sai Kung in Wong Tei Tung. The stone tools found in Sai Kung were perhaps from a stone tool making ground. Religious carvings on outlying islands and coastal areas have also been found, possibly related to Che people in Neolithic. The latest findings dating from the Paleolithic suggest that Wong Tei Tung (黃地峒) is one of the most ancient settlements in Hong Kong.
</p>
<p>
  The territory that now comprises Hong Kong was incorporated into China during the Qin Dynasty (221 BC – 206 BC), and the area was firmly consolidated under Nanyue (203 BC – 111 BC.) Archaeological evidence indicates that the population increased since the Han Dynasty (206 BC – AD 220). In the 1950s, the tomb at Lei Cheng Uk from the Eastern Han Dynasty (AD 25 – AD 220) was excavated and archaeologists began to investigate the possibility that salt production flourished in Hong Kong around 2000 years ago, although conclusive evidence has not been found.
</p>
<p>
Tai Po Hoi, the sea of Tai Po, was a major pearl hunting harbour in China from the Han Dynasty through the Ming Dynasty (1368 – 1644), with activities peaking during the Southern Han (917 – 971).
</p>
<p>
During the Tang Dynasty, the Guangdong region flourished as an international trading center. The Tuen Mun region in what is now Hong Kong's New Territories served as a port, naval base, salt production centre and later, base for the exploitation of pearls. Lantau Island was also a salt production centre, where the salt smugglers riots broke out against the government.
</p>
<a name="a"></a>
<div>(A) This is normal &lt;a name=&quot;a&quot;&gt;</div>
<p>
In 1276 during the Mongol invasion, the Southern Song Dynasty court moved to Fujian, then to Lantau Island and later to today's Kowloon City. Emperor Huaizong of Song, the last Song Dynasty emperor, was enthroned at Mui Wo on Lantau Island on 10 May 1278 at the age of 8. This event is commemorated by the Sung Wong Toi in Kowloon. After his defeat at the Battle of Yamen on 19 March 1279, the child emperor committed suicide by drowning with his officials at Mount Ya (modern Yamen Town in Guangdong). Tung Chung valley, named after a hero who gave up his life for the emperor, is believed to have been one of the locations for his court. Hau Wong, an official of the emperor is still worshipped in Hong Kong today.
</p>
<div data-anchor-name="b">(B) Use the default color</div>
<p>
During the Mongol period, Hong Kong saw its first population boom as Chinese refugees entered the area. The main reason for them to enter Hong Kong was because of wars and famines, and some groups even went there to find jobs. Five clans of Hau (侯), Tang (鄧), Pang (彭) and Liu (廖) and Man (文) lived mostly in the New Territories were Punti (Locals, 本地人) from Guangdong, Fujian and Jiangxi in China. Despite the immigration and light development of agriculture, the area was hilly and relatively barren. People had to rely on salt, pearl and fishery trades to produce income. Some clans built walled villages to protect themselves from the threat of bandits, rival clans and wild animals. The famous Chinese pirate Cheung Po Tsai was legendary in Hong Kong.
</p>
<div data-anchor-name="c" style="background-color:#9a8fff;" data-anchor-color="#ff7066">(C) use custom color</div>
<p>
  By the early 19th century, the British Empire trade was heavily dependent upon the importation of tea from China. While the British exported to China luxury items like clocks and watches, there remained an overwhelming imbalance in trade. China developed a strong demand for silver, which was a difficult commodity for the British to come by in large quantities. The counterbalance of trade came with exports of opium to China, opium being legal in Britain and grown in significant quantities in the UK,[2] and later in far greater quantities in India.
</p>
<p>
  The last dynasty in China, Qing Dynasty, was also the last to come in contact with Hong Kong. As a military outpost and trading port, the Hong Kong territory later gained the attention of the world.
</p>
<p>
  A Chinese commissioner Lin Zexu voiced to Queen Victoria the Qing state's opposition to the opium trade. It resulted in the First Opium War, which led to British victories over China and the cession of Hong Kong to the United Kingdom via the enactment of the new treaties in 1842.
</p>
<p>
  Christian missionaries founded numerous schools and churches in Hong Kong. St. Stephen’s Anglican Church located in West Point was founded by the Church Missionary Society (Church Mission Society)(CMS) in 1865. Ying Wa Girls' School (英華女學校) located in Mid-levels was founded by the London Missionary Society in 1900. The Hong Kong College of Medicine for Chinese (香港華人西醫書院) was founded by the London Missionary Society in 1887, with its first graduate (in 1892) being Sun Yat-sen (孫中山). The Hong Kong College of Medicine for Chinese was the forerunner of the School of Medicine of the University of Hong Kong, which started in 1911.
</p>
<p>
  Along with fellow students Yeung Hok-ling, Chan Siu-bak and Yau Lit, Sun Yat-sen started to promote the thought of overthrowing the Qing Government while he studied in the Hong Kong College of Medicine for Chinese (香港華人西醫書院). The four students were known by the Qing Government as the Four Bandits. Sun attended To Tsai Church (道濟會堂, founded by the London Missionary Society in 1888) while he studied in this College. Later Sun led the Chinese Revolution (1911), which changed China from an empire to a republic.
</p>
<p>
  In April 1899, the residents of Kam Tin (錦田) rebelled against the rule of the British colonial government. They defended themselves in Kat Hing Wai (吉慶圍), a walled village. After several unsuccessful attacks by the British troops, the iron gate was blasted open. The gate was then shipped to London for exhibition. Under the demand of the Tang (鄧) clan in 1924, the gate was eventually returned in 1925 by the 16th governor, Sir Reginald Stubbs (司徒拔爵士).
</p>
<p>
  After the territorial settlements, the achievements of the era set the foundation for the culture and commerce in modern Hong Kong for years to come. The territory's commerce and industry transitioned in numerous ways: Hong Kong and China Gas Company to the first electric company; Rickshaws transited to bus, ferries, trams and airline,[3] there was no shortage of improvements. Every industry went through major transformation and growth. Other vital establishments included changes in philosophy, starting with a western-style education with Frederick Stewart,[4] which was a critical step in separating Hong Kong from mainland China during the political turmoil associated with the falling Qing dynasty. The monumental start of the financial powerhouse industry of the far east began with the first large scale bank.[5]
</p>
<p>
  In the same period there was the onslaught of the Third Pandemic of Bubonic Plague, which provided the pretext for racial zoning with the creation of Peak Reservation Ordinance[6] and recognising the importance of the first hospital. On the outbreak of World War I in 1914, fear of a possible attack on the colony led to an exodus of 60,000 Chinese. Statistically Hong Kong's population continued to boom in the following decades from 530,000 in 1916 to 725,000 in 1925. Nonetheless the crisis in mainland China in the 1920s and 1930s left Hong Kong vulnerable to a strategic invasion from Imperial Japan.
</p>

script.js

function scrollToAnchor(params) {
  if (!document.location.hash) {
    return;
  }

  var hash = document.location.hash.substring(1);
  // no need to do the animation if the page already have <a name="hash">
  if (!hash || $('a[name="' + hash + '"]').length > 0) {
    return;
  }

  var p =  {
    anchorNameAttr: 'data-anchor-name',
    bgColorAttr: 'data-anchor-color',
    bgColor: null,        // the highlight background color
                          // ignore if the selected element has attribute data-anchor-color
                          // if both bgColor and data-anchor-color are null, will not change the background
    bgTimeout: 3000,      // wait time before restoring the background color
    bgDuration: 1000,     // duration of the restore animation
    scrollDuration: 1000, // duration of scrolling animation
    scrollMargin: 0       // the gap between the selected element and the window top
  };
  for (var k in (params || {})) {
    p[k] = params[k];
  }

  var $ele = $('[' + p.anchorNameAttr + '="' + hash + '"]');
  if ($ele.length > 0) {
    var bgColor = $ele.attr(p.bgColorAttr) || p.bgColor;

    // animate the background
    if (bgColor) {
      var bg = $ele.css('backgroundColor');
      $ele.css({ "backgroundColor": bgColor });
      window.setTimeout(function() {
        $ele.animate({ "backgroundColor": bg}, p.bgDuration);
      }, p.bgTimeout);
    }

    // scroll to the element
    $('body').animate({
      scrollTop: Math.max($ele.offset().top - p.scrollMargin, 0)
    }, p.scrollDuration);
  }
}

// load when page ready
$(document).ready(function() {
  scrollToAnchor({
    bgColor: '#ffc',
    scrollMargin: 30
  });
});

// bind to hash change
$(window).bind('hashchange', function() {
  scrollToAnchor({
    bgColor: '#ffc',
    scrollMargin: 30
  });
});

Scroll-to-Anchor.markdown

Scroll to Anchor

Scroll to an element with scrolling and color animation to the concerned element with the URL hash (e.g. http://example.com/#somename)

Need jquery-color plugin for color animation

A Pen by Angus on CodePen.

License.

style.css

body {
  padding: 10px
}

div {
  border: 1px solid #ccc;
  padding:30px;
  width: 50%;
}