JavaScript – Botón “Desplazar hacia abajo” – Desplazarse desde la página de destino hasta la parte superior del encabezado

Estoy usando el mismo método de “desplazamiento hacia abajo” que se usa aquí:

https://codepen.io/nxworld/pen/OyRrGy

Por supuesto, el JavaScript en ese ejemplo no lo lleva a un lugar específico en la página, simplemente lo lleva a la siguiente sección. Lo que estoy tratando de hacer es, en lugar del botón “desplazarse hacia abajo” que nos lleva desde aquí:

enter image description here

hasta aquí (esto es lo que está sucediendo actualmente): enter image description here

queremos que el botón de desplazamiento hacia abajo nos lleve a donde la parte superior del encabezado toca la parte superior de la ventana del navegador (como esta):

enter image description here

Esto es lo que tengo actualmente en mi archivo JS:

//javascript functions (function ($, root, undefined) { $(function () { 'use strict'; // DOM ready, take it away }); })(jQuery, this); //landing page text delay window.onload = function() { $("p").each(function(index) { $(this).css({ 'animation-delay': (index + 1) * .7 + 's' }); }); } //scroll to top functions, found here: http://plnkr.co/edit/DCnukHPNWa6Z1zOX53xp?p=preview //scroll to top (linear) function scrollToTop(scrollDuration) { var scrollStep = -window.scrollY / (scrollDuration / 15), scrollInterval = setInterval(function(){ if ( window.scrollY != 0 ) { window.scrollBy( 0, scrollStep ); } else clearInterval(scrollInterval); },15); } //scroll to top (ease in and out) function scrollToTop(scrollDuration) { const scrollHeight = window.scrollY, scrollStep = Math.PI / ( scrollDuration / 15 ), cosParameter = scrollHeight / 2; var scrollCount = 0, scrollMargin, scrollInterval = setInterval( function() { if ( window.scrollY != 0 ) { scrollCount = scrollCount + 1; scrollMargin = cosParameter - cosParameter * Math.cos( scrollCount * scrollStep ); window.scrollTo( 0, ( scrollHeight - scrollMargin ) ); } else clearInterval(scrollInterval); }, 15 ); } //scroll down (function($) { $('a[href*=#]').on('click', function(e) { console.log( $(".container").offset().top) e.preventDefault(); $('html,body').animate({ scrollTop: $("#menu-main").offset().top - 6}, 1700); //$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 900, 'linear'); }); })(jQuery); $(function() { $('a[href*=#]').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear'); }); }); window.onload =(function($) { $(function(){ // Check the initial Poistion of the Sticky Header var stickyHeaderTop = $('#menu-main').offset().top; $(window).scroll(function(){ if( $(window).scrollTop() >= stickyHeaderTop ) { $('#menu-main').css({ position: 'fixed', width: '100%', top: '0px', 'z-index': 99999, height: '45px' }); $('#menu-main-navigation').css('margin-top', '-7px'); $('#logo').css({ 'font-size':'40px', 'margin-top': '-20px' }); $('#stickyalias').css('display', 'block'); } else { $('#menu-main-navigation').css('margin-top', '0'); $('#logo').css({ 'font-size': '50px', 'margin-top': '-15px' }); $('#menu-main').css({ position: '', top: '', 'z-index': 0, height: '57px' }); $('#stickyalias').css('display', 'none'); } }); }); })(jQuery) 

Puede ver que ya tengo varias funciones para desplazarme hacia la parte superior de la página ( scrollToTop ) y creo que puedo usar el mismo tipo de lógica para desplazarme hacia abajo. Como mi función scrollDown actual no funciona correctamente, traté de comentarla y en su lugar escribí algo como esto:

 //scroll down (ease in and out) function scrollToHeader(scrollDuration) { const scrollHeight = window.scrollY, //distance from scroll down button to the top of the header scrollStep = Math.PI / ( scrollDuration / 15 ), cosParameter = scrollHeight / 2; var scrollCount = 0, scrollMargin, scrollInterval = setInterval( function() { if ( window.scrollY != 0 ) { scrollCount = scrollCount + 1; scrollMargin = cosParameter - cosParameter * Math.cos (scrollCount * scrollStep); window.scrollTo( 0, ( scrollHeight - scrollMargin ) ); } else clearInterval(scrollInterval); }, 15 ); } 

Luego apliqué esa función al botón de desplazamiento en el HTML:

  

Pero cuando probé esto hizo que el botón de desplazamiento se moviera hacia el lado izquierdo de la página, y en realidad me llevó hacia arriba en lugar de hacia abajo, así que volví a comentar la función en mi JS y me deshice de los cambios que hice en mi HTML (header-front-page.php). Puede ver cómo funciona actualmente en thebullshitcollection.com . Gracias de antemano por su ayuda / sugerencias.

EDITAR : entre otras funciones que he enumerado anteriormente, esta función se ha agregado a mi archivo JS:

 jQuery(document).ready(function ($) { $('#section5').click(function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: $("#menu-main").position().top }, 1000); }); } 

El objective de su enlace es #section5 debe ser #menu-main
Espero que esto ayude.

EDITAR
Si quieres desplazarte prueba esto

 $('#section5').click(function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: $("#menu-main").position().top }, 1000); }); 

SYA 🙂