Databases
StackOverflow2013
Postsdbo
POsmooth scrolling between pages
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POsmooth scrolling between pages
    primarykey
    data
    text
    <p>I am trying to add some smooth scrolling to my portfolio site, so that when you click on a project button it will load the new page and smooth scroll down to the project -<a href="http://www.mattdbryce.co.uk/" rel="nofollow">http://www.mattdbryce.co.uk/</a>. I've found this code - <a href="http://css-tricks.com/snippets/jquery/smooth-scrolling/" rel="nofollow">http://css-tricks.com/snippets/jquery/smooth-scrolling/</a> - however that only allows smooth scrolling for links on the same page. When i used this code, no matter which link you click on in the navigation, it would just smooth scroll down on the existing page.</p> <p>I considered having one long page with lots of anchor tags but wouldnt this take forever to load?</p> <p>Any ideas guys? </p> <p>Many thanks,</p> <p>Matt</p> <p>My HTML:</p> <pre><code>&lt;!DOCTYPE HTML&gt; </code></pre> <p></p> <pre><code>&lt;head&gt; &lt;!--web fonts--&gt; &lt;link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono:400italic,700italic' rel='stylesheet' type='text/css'&gt; &lt;!--end web fonts--&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Matt Bryce | East London Graphic Design, Web Design, Logo Design and Brand Identity&lt;/title&gt; &lt;!--css files--&gt; &lt;link rel="stylesheet" href="css/reset.css"&gt; &lt;link rel="stylesheet" href="css/text.css"&gt; &lt;link rel="stylesheet" href="css/960_24_col.css"&gt; &lt;link rel="stylesheet" href="css/style.css"&gt; &lt;link rel="stylesheet" href="css/font-awesome.min.css"&gt; &lt;!--End css files--&gt; &lt;!--JS--&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/smooth-scroll.js"&gt;&lt;/script&gt; &lt;!--END JS--&gt; &lt;!--favicon--&gt; &lt;link rel="shortcut icon" href="favicon.png"&gt; &lt;!--End favicon--&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="shadow"&gt; &lt;div class="container_24"&gt; &lt;header&gt; &lt;h1 class="clearfix"&gt;&lt;a href="index.html"&gt;Matt Bryce&lt;/a&gt;&lt;/h1&gt; &lt;div id="title"&gt;&lt;h2&gt;Matthew Bryce Portfolio&lt;/h2&gt;&lt;/div&gt; &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="mailto:info@mattdbryce.co.uk"&gt;&lt;img src="img/contact.png" alt="Contact"/&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; </code></pre> <pre><code> &lt;div class="portfolio-nav"&gt; &lt;div class="grid_4"&gt; &lt;h3&gt;&lt;a href="good-taste.html#project-top"&gt;&lt;img src="img/good-taste-button-1.png" alt="Good Taste Delicatessen - Branding + Website"&gt;&lt;/a&gt;Good Taste Delicatessen&lt;/h1&gt; &lt;p&gt;Branding + Website&lt;/p&gt; &lt;/div&gt; &lt;div class="grid_4"&gt; &lt;h3&gt;&lt;a href="jims-cafe.html#project-top"&gt;&lt;img src="img/jims-cafe-button-1.png" alt="Jim's Cafe - Logo Design"&gt;&lt;/a&gt;Jim's Cafe&lt;/h1&gt; &lt;p&gt;Logo Design&lt;/p&gt; &lt;/div&gt; &lt;div class="grid_4"&gt; &lt;h3&gt;&lt;a href="coffee-revolution.html#project-top"&gt;&lt;img src="img/the-coffee-revolution-button-1.png" alt="The Coffee Revolution - Events Poster"&gt;&lt;/a&gt;The Coffee Revolution&lt;/h1&gt; &lt;p&gt;Events Poster&lt;/p&gt; &lt;/div&gt; &lt;div class="grid_4"&gt; &lt;h3&gt;&lt;a href="wilton-way.html#project-top"&gt;&lt;img src="img/wilton-way-cafe-button-1.png" alt="Wilton Way Cafe - Logo Design"&gt;&lt;/a&gt;The Wilton Way Cafe&lt;/h1&gt; &lt;p&gt;Logo Design&lt;/p&gt; &lt;/div&gt; &lt;div class="grid_4"&gt; &lt;h3&gt;&lt;a href="halligan-poster.html#project-top"&gt;&lt;img src="img/halligan-poster-button-1.png" alt="Halligan - Gig Poster"&gt;&lt;/a&gt;Halligan&lt;/h1&gt; &lt;p&gt;Gig Poster&lt;/p&gt; &lt;/div&gt; &lt;div class="grid_4"&gt; &lt;h3&gt;&lt;a href="mj-wedding.html#project-top"&gt;&lt;img src="img/martyn-and-jo-button-1.png" alt="Martyn + Jo - Wedding Invitiations"&gt;&lt;/a&gt;Martyn + Jo&lt;/h1&gt; &lt;p&gt;Wedding Invitation&lt;/p&gt; &lt;/div&gt; &lt;div class="grid_4"&gt; &lt;h3&gt;&lt;a href="dog-and-wardrobe.html#project-top"&gt;&lt;img src="img/the-dog-and-wardrobe-button-1.png" alt="The Dog + Wardrobe - Campaign Material"&gt;&lt;/a&gt;The Dog + Wardrobe&lt;/h1&gt; &lt;p&gt;Campaign Material&lt;/p&gt; &lt;/div&gt; &lt;div class="grid_4"&gt; &lt;h3&gt;&lt;a href="early-years.html#project-top"&gt;&lt;img src="img/the-early-years-button-1.png" alt=""&gt;&lt;/a&gt;The Early Years&lt;/h1&gt; &lt;p&gt;Gig Poster&lt;/p&gt; &lt;/div&gt; &lt;div class="grid_4"&gt; &lt;h3&gt;&lt;a href="halligan-album.html#project-top"&gt;&lt;img src="img/halligan-album-button-1.png" alt="Halligan - Album Artwork"&gt;&lt;/a&gt;Halligan&lt;/h1&gt; &lt;p&gt;Album Artwork&lt;/p&gt; &lt;/div&gt; &lt;div class="grid_4"&gt; &lt;h3&gt;&lt;a href="part-chimp.html#project-top"&gt;&lt;img src="img/part-chimp-button-1.png" alt="Part Chimp - Gig Poster"&gt;&lt;/a&gt;Part Chimp&lt;/h1&gt; &lt;p&gt;Gig Poster&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <pre><code> &lt;footer&gt;&lt;p&gt;Copyright Matthew Bryce Design&lt;/p&gt;&lt;/footer&gt; &lt;/div&gt; &lt;!--end container--&gt; &lt;/div&gt; &lt;!--JQuery--&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; &lt;!--Include plugin--&gt; &lt;!--hook it up--&gt; &lt;/body&gt; </code></pre> <p></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmattdbryce
    1. USmattdbryce
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POsmooth scrolling between pages
      1. USdeus
      1. VTFavorite
    1. COPlease can you make a fiddle http://jsfiddle.net
      singulars
      1. POsmooth scrolling between pages
      1. USHive7
    2. COhttp://jsfiddle.net/y7FLs/ Does this help??
      singulars
      1. POsmooth scrolling between pages
      1. USmattdbryce
    3. CONo not really thoughI think I know your problemn
      singulars
      1. POsmooth scrolling between pages
      1. USHive7
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload