Add smooth scroll functionality in your website

Here’s how to create scroll to any element on the page in your website. If you’re using WordPress or a static HTML, you don’t need to use a plugin. It’s very simple:

Just create a custom.js file in your website and paste the code below, this code will check if the href attibute of the anchor start with a sharp sign(#) and scroll the page to the target element

[php]
<script>
jQuery(function($) {
$(‘a[href*=#]:not([href=#])’).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’);
if (target.length) {
$(‘html,body’).animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});
</script>
[/php]

Additionally, if your website have a sticky header some of the content of the target element will go underneath the sticky header to avoid this we have to rewrite the code.

We have to get the height of the sticky header by adding this code
[php]
var headerHeight = $(".stickyheader").height();
[/php]

then we have to change this code
[php]
scrollTop: target.offset().top
[/php]

to this
[php]
scrollTop: target.offset().top – headerHeight
[/php]

this will subtract the sticky header height to the target offset

the final code should be like this
[php]
<script>
jQuery(function($) {
$(‘a[href*=#]:not([href=#])’).click(function() {
var headerHeight = $(".stickyheader").height();
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’);
if (target.length) {
$(‘html,body’).animate({
scrollTop: target.offset().top – headerHeight
}, 500);
return false;
}
}
});
});
</script>
[/php]

If this steps are difficult I suggest to check wordpress plugin here https://wordpress.org/plugins/search/smooth+scroll/ that have the functionality you need. Goodluck ūüôā

Initial Site Optimization

1. Delete all unnecessary plugins

Must have pluigins that must be installed and activated on the site:

All these plugins must be setup properly

  • Akismet
  • Buckupbuddy
  • Jetpack by WordPress.com
  • W3 Total Cache
  • Wordfence Security
  • WP Smush

Plugins to setup later

  • Yoast SEO
  • Google Analytics by MonsterInsights
  • Monarch Plugin
  • Bloom

2. Delete all dummy post, pages and comments

3. Address all issues displayed in notification on top of the Dashboard pages.

Github Tutorial

1. GitHub Basics and Source Control Basic

Command lines for Mac:

  • cd – Change directory
  • cd .. – up directory
  • cd <directory name> – go to directory named <directory name>
  • ls – will show listing of all files in your current directory
  • git clone <https URL> – to copy the files in the directory
  • git status – will give us update what is the difference between local files and files in GitHub repository
  • git add¬†<filename>¬†– add <filename> to the project
  • git commit – means we are¬†locking it in to the repository
    • -m “<message> –¬†to add comments or notes
  • git push – ¬†to upload the files to GitHub repository
  • git pull – pull the updated files from Github repository
  • git add -A –¬†to add all files new files, changes and removed files¬†(should be follow that up with git commit and git push)
  • <escape key>:wq¬†– combination key to back to normal command line if you accidentally enter¬†git commit without a message.

2. GitHub pull request, Branching, Merging & Team Workflow

Command lines:

  • git branch¬†– to display the projects branches
  • git branch <new-branch-name>¬†– to create new branch of the master branch. It will have the complete copy of the master branch
  • git checkout¬†<new-branch-name> – to make code changes on the branch without making any changes on the master branch
  • git push –set-upstream origin<new-branch-name> – to create the newly created branch to GitHub repository