Skip to content
Coding Wiki

Coding Wiki

Personal notes

  • Development
    • Front End
      • Aoda
      • Bootstrap
      • CSS
      • jQuery / JavaScript
      • Plugin Frontend Additions
      • ReactJS
    • Back End
      • ACF
      • Database
      • Laravel
      • Linux
      • PHP
      • WordPress Functions and Hooks
  • Processes
    • Creating a new project
  • Plugins
    • Internal
    • External
  • Tools
    • Desktop Setup
      • Compilers
      • Cross Browser Testing
      • Docker
      • PuTTY
      • WAMP
    • Domains and Emails
      • 1&1
      • GoDaddy
    • Source Control
      • Bitbucket
      • Git
      • HQ Deploy
      • SourceTree
    • Server Setup
      • Flywheel
      • Google Compute
    • Online
      • Google Analytics
  • Install new site on server
  • Home
  • / Archives

Tag: scrollTop

Posted on December 22, 2016January 29, 2022

Go To an element – smooth scrolling

CategoriesDevelopment, Front End, jQuery / JavaScript

Go To Top smooth scroll

$('a[href^="#"]').click(function() {
    $('html, body').animate({
        scrollTop: $("body").offset().top
    }, 700);
});

Smooth scroll to an element ID on the page

$("#clickedElement").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementID").offset().top
    }, 700);
});
Posted on November 23, 2016January 29, 2022

Header menu background color change on scrolling

CategoriesDevelopment, Front End, jQuery / JavaScript
$(window).scroll(function () {
	var scroll = $(window).scrollTop();

	if (scroll >= 100) {
		$("header").addClass("scrolling");
	} else {
		$("header").removeClass("scrolling");
	}
});

Most Viewed

How to set state with dynamic key-value pair in React under Development , Front End , ReactJS

Set Up an SSH Key for SourceTree (Windows) under Desktop Setup , Source Control , SourceTree , Tools

jQuery – detect click event on pseudo-element under Development , Front End , jQuery / JavaScript

MySQL shutdown unexpectedly on XAMPP – Server socket created on IP: ‘::’ under Desktop Setup , Tools , XAMPP

Install AIMEOS Laravel project under Back End , Development , Laravel

Adding Google Analytics 4 (GA4) Tracking to React App under Development , Front End , Google Analytics , Online , ReactJS , Tools

Couldn’t load private key format too new under Desktop Setup , PuTTY , Tools

Convert an entire directory using dos2unix under Back End , Development , Linux

Move repository from Bitbucket to GitHub with all branches and commits under Bitbucket , Git , Source Control , Tools

How to load SSH Keys to SourceTree under Source Control , SourceTree , Tools

Eloquent Many to Many Relationship CRUD under Back End , Development , Laravel

Creating Custom Module In Divi under Archived

GitHub Updater under External , Plugins

Window Resize Debounce under Development , Front End , jQuery / JavaScript

Edit old commit message under Git , Source Control , Tools

Create new Laravel project under Back End , Development , Laravel

Laravel Frontend under Back End , Development , Laravel

Redux Saga under Development , Front End , ReactJS

GraphQL queries under Development , Front End , ReactJS

Laravel Components under Back End , Development , Laravel

Tags

  • backend
  • bootstrap
  • css
  • custom
  • divi
  • embed
  • equal height grid
  • fancybox
  • flexbox
  • font
  • git
  • homestead
  • IE
  • import
  • innerHeight
  • install
  • internet explorer
  • javascript
  • jquery
  • js
  • laravel
  • lightbox
  • link
  • local
  • login
  • mask
  • menu
  • modal
  • plugin
  • pseudo elements
  • resize
  • scroll
  • scrolling
  • scrollTop
  • setup
  • shortcode
  • style
  • text
  • video
  • vimeo
  • Visual Composer
  • website
  • windows
  • wordpress
  • youtube
Proudly powered by WordPress