B
beta55
Delta
Claro que deja de funcionar, por que el enlace del escroll no encuentra la id
#about.
El problema es que estas cambiando solo la id del section y no estas cambiando la url del enlace del menu.
<a href="#sobre-mi">About</a>
Ver el archivo adjunto 94674
Que sí, que si está cambiado. Lo que deja de funcionar es el efecto del scroll no el enlace. El enlace del menú lo pulso y va a la sección correspondiente pero va "de golpe" por decirlo así, sin la bajada del scroll esa.
Es que estas cambiando el id que tiene que estar usando el archivo js!!! En lugar modificar el id, agrega otra clase (una etiqueta puede tener un solo id, pero muchas clases)
Class="about-us sobre-mi"
Enviado desde mi XT1063 mediante Tapatalk
También es probable que el archivo javascript que se encarga de manejar el tema del scroll esté mal programado y tengas que añadir/editar algo en él cada vez que editas/agregas nuevas secciones...
Publica el contenido del archivo javascript...
// SmoothScroll for websites v1.2.1
// Licensed under the terms of the MIT license.
// People involved
// - Balazs Galambosi (maintainer)
// - Michael Herf (Pulse Algorithm)
!function(){function e(){var e=!1;e&&c("keydown",r),v.keyboardSupport&&!e&&u("keydown",r)}function t(){if(document.body){var t=document.body,o=document.documentElement,n=window.innerHeight,r=t.scrollHeight;if(S=document.compatMode.indexOf("CSS")>=0?o:t,w=t,e(),x=!0,top!=self)y=!0;else if(r>n&&(t.offsetHeight<=n||o.offsetHeight<=n)){var a=!1,i=function(){a||o.scrollHeight==document.height||(a=!0,setTimeout(function(){o.style.height=document.height+"px",a=!1},500))};if(o.style.height="auto",setTimeout(i,10),S.offsetHeight<=n){var l=document.createElement("div");l.style.clear="both",t.appendChild(l)}}v.fixedBackground||b||(t.style.backgroundAttachment="scroll",o.style.backgroundAttachment="scroll")}}function o(e,t,o,n){if(n||(n=1e3),d(t,o),1!=v.accelerationMax){var r=+new Date,a=r-C;if(a<v.accelerationDelta){var i=(1+30/a)/2;i>1&&(i=Math.min(i,v.accelerationMax),t*=i,o*=i)}C=+new Date}if(M.push({x:t,y:o,lastX:0>t?.99:-.99,lastY:0>o?.99:-.99,start:+new Date}),!T){var l=e===document.body,u=function(){for(var r=+new Date,a=0,i=0,c=0;c<M.length;c++){var s=M[c],d=r-s.start,f=d>=v.animationTime,h=f?1:d/v.animationTime;v.pulseAlgorithm&&(h=p(h));var m=s.x*h-s.lastX>>0,w=s.y*h-s.lastY>>0;a+=m,i+=w,s.lastX+=m,s.lastY+=w,f&&(M.splice(c,1),c--)}l?window.scrollBy(a,i):(a&&(e.scrollLeft+=a),i&&(e.scrollTop+=i)),t||o||(M=[]),M.length?E(u,e,n/v.frameRate+1):T=!1};E(u,e,0),T=!0}}function n(e){x||t();var n=e.target,r=l(n);if(!r||e.defaultPrevented||s(w,"embed")||s(n,"embed")&&/\.pdf/i.test(n.src))return!0;var a=e.wheelDeltaX||0,i=e.wheelDeltaY||0;return a||i||(i=e.wheelDelta||0),!v.touchpadSupport&&f(i)?!0:(Math.abs(a)>1.2&&(a*=v.stepSize/120),Math.abs(i)>1.2&&(i*=v.stepSize/120),o(r,-a,-i),void e.preventDefault())}function r(e){var t=e.target,n=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==H.spacebar;if(/input|textarea|select|embed/i.test(t.nodeName)||t.isContentEditable||e.defaultPrevented||n)return!0;if(s(t,"button")&&e.keyCode===H.spacebar)return!0;var r,a=0,i=0,u=l(w),c=u.clientHeight;switch(u==document.body&&(c=window.innerHeight),e.keyCode){case H.up:i=-v.arrowScroll;break;case H.down:i=v.arrowScroll;break;case H.spacebar:r=e.shiftKey?1:-1,i=-r*c*.9;break;case H.pageup:i=.9*-c;break;case H.pagedown:i=.9*c;break;case H.home:i=-u.scrollTop;break;case H.end:var d=u.scrollHeight-u.scrollTop-c;i=d>0?d+10:0;break;case H.left:a=-v.arrowScroll;break;case H.right:a=v.arrowScroll;break;default:return!0}o(u,a,i),e.preventDefault()}function a(e){w=e.target}function i(e,t){for(var o=e.length;o--;)z[N(e[o])]=t;return t}function l(e){var t=[],o=S.scrollHeight;do{var n=z[N(e)];if(n)return i(t,n);if(t.push(e),o===e.scrollHeight){if(!y||S.clientHeight+10<o)return i(t,document.body)}else if(e.clientHeight+10<e.scrollHeight&&(overflow=getComputedStyle(e,"").getPropertyValue("overflow-y"),"scroll"===overflow||"auto"===overflow))return i(t,e)}while(e=e.parentNode)}function u(e,t,o){window.addEventListener(e,t,o||!1)}function c(e,t,o){window.removeEventListener(e,t,o||!1)}function s(e,t){return(e.nodeName||"").toLowerCase()===t.toLowerCase()}function d(e,t){e=e>0?1:-1,t=t>0?1:-1,(k.x!==e||k.y!==t)&&(k.x=e,k.y=t,M=[],C=0)}function f(e){if(e){e=Math.abs(e),D.push(e),D.shift(),clearTimeout(A);var t=D[0]==D[1]&&D[1]==D[2],o=h(D[0],120)&&h(D[1],120)&&h(D[2],120);return!(t||o)}}function h(e,t){return Math.floor(e/t)==e/t}function m(e){var t,o,n;return e*=v.pulseScale,1>e?t=e-(1-Math.exp(-e)):(o=Math.exp(-1),e-=1,n=1-Math.exp(-e),t=o+n*(1-o)),t*v.pulseNormalize}function p(e){return e>=1?1:0>=e?0:(1==v.pulseNormalize&&(v.pulseNormalize/=m(1)),m(e))}var w,g={frameRate:150,animationTime:800,stepSize:120,pulseAlgorithm:!0,pulseScale:8,pulseNormalize:1,accelerationDelta:20,accelerationMax:1,keyboardSupport:!0,arrowScroll:50,touchpadSupport:!0,fixedBackground:!0,excluded:""},v=g,b=!1,y=!1,k={x:0,y:0},x=!1,S=document.documentElement,D=[120,120,120],H={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},v=g,M=[],T=!1,C=+new Date,z={};setInterval(function(){z={}},1e4);var A,N=function(){var e=0;return function(t){return t.uniqueID||(t.uniqueID=e++)}}(),E=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)}}(),K=/chrome/i.test(window.navigator.userAgent),L="onmousewheel"in document;L&&K&&(u("mousedown",a),u("mousewheel",n),u("load",t))}();
Ese código pertenece al objeto/plugin que se encarga de crear la funcionalidad...
Tienes que revisar el archivo main.js , o como sea que hayan llamado al archivo js principal de la plantilla, donde generan la instancia del objeto SmoothScroll...
jQuery(function($) {
"use strict";
var gamba = window.gamba || {};
/*=======================================
= MAIN FUNCTION =
=======================================*/
gamba.mainFunction = function() {
// ----------------------- WOW-JS --------------------------- //
new WOW().init();
// ----------------------- DATEPICKER JS --------------------------- //
// js for calendar
$('.input-daterange, .archive-datepicker').datepicker({
format: 'mm/dd/yy',
maxViewMode: 0
});
// js for time
$('.times-open').timepicker({
'scrollDefault': 'now'
});
// ----------------------- SLIDE BANNER --------------------------- //
$('.background-slide').slick({
dots: false,
arrows: false,
speed: 700,
fade: true,
autoplay: true,
autoplaySpeed: 5000,
cssEase: 'linear',
pauseOnHover: false
});
$('.background-slide').on('afterChange', function(event, slick, currentSlide){
$('.slick-active .logo-images').addClass('animated fadeInDown');
$('.slick-active .group-btn-2').addClass('animated fadeInUp');
$('.slick-active .group-title').addClass('animated fadeInUp');
$('.slick-active .group-title-2').addClass('animated fadeInRight');
$('.slick-active .group-open-hours').addClass('animated fadeInRight');
$('.slick-active .btn-left').addClass('animated fadeInLeft');
$('.slick-active .btn-right').addClass('animated fadeInRight');
$('.slick-active .btn-center').addClass('animated zoomIn');
$('.slick-active .logo-images').removeClass('hidden');
$('.slick-active .group-btn-2').removeClass('hidden');
$('.slick-active .group-title').removeClass('hidden');
$('.slick-active .group-title-2').removeClass('hidden');
$('.slick-active .group-open-hours').removeClass('hidden');
$('.slick-active .btn-left').removeClass('hidden');
$('.slick-active .btn-right').removeClass('hidden');
$('.slick-active .btn-center').removeClass('hidden');
});
$('.background-slide').on('beforeChange', function(event, slick, currentSlide){
$('.slick-active .logo-images').removeClass('animated fadeInDown');
$('.slick-active .group-btn-2').removeClass('animated fadeInUp');
$('.slick-active .group-title').removeClass('animated fadeInUp');
$('.slick-active .group-title-2').removeClass('animated fadeInRight');
$('.slick-active .group-open-hours').removeClass('animated fadeInRight');
$('.slick-active .btn-left').removeClass('animated fadeInLeft');
$('.slick-active .btn-right').removeClass('animated fadeInRight');
$('.slick-active .btn-center').removeClass('animated zoomIn');
$('.slick-active .logo-images').addClass('hidden');
$('.slick-active .group-btn-2').addClass('hidden');
$('.slick-active .group-title').addClass('hidden');
$('.slick-active .group-title-2').addClass('hidden');
$('.slick-active .group-open-hours').addClass('hidden');
$('.slick-active .btn-left').addClass('hidden');
$('.slick-active .btn-right').addClass('hidden');
$('.slick-active .btn-center').addClass('hidden');
});
// ----------------------- SLIDE MENU --------------------------- //
$('.special-menu .list-dish').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
speed: 500,
dots: false,
arrows: true,
autoplay: true,
autoplaySpeed: 7000,
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 2,
autoplay: false
}
},
{
breakpoint: 481,
settings: {
slidesToShow: 1,
autoplay: false
}
}
]
});
// ----------------------- SLIDE TESTIMONIAL --------------------------- //
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
arrows: false,
centerMode: true,
focusOnSelect: true,
centerPadding: '0px'
});
// ----------------------- SLIDE OUR CHEFS --------------------------- //
$('.our-chefs-list').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
speed: 900,
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 8000,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
autoplay: false
}
},
{
breakpoint: 481,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false
}
}
]
});
// ----------------------- SLIDE INFOMATION --------------------------- //
$('.list-infomation').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
speed: 500,
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 5000,
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
autoplay: false
}
},
{
breakpoint: 481,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false
}
}
]
});
// ----------------------- SLIDE GROUP LOGO --------------------------- //
$('.list-logo').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
speed: 500,
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 5000,
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 320,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
// ----------------------- FOOTER JS --------------------------- //
// slide gallery footer
$('.gamba-gallery .content-widget').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
speed: 500,
dots: false,
arrows:true,
responsive: [
{
breakpoint: 768,
settings: {
autoplay: false
}
}
]
});
if ($(window).width() > 767) {
$('.last-section').css('margin-bottom',$('.footer').height());
}
};
gamba.event = function(){
// js for calendar
// set up time coming soon
var target_date = new Date("December 30, 2016").getTime();
// variables for time units
var days, hours, minutes, seconds;
var $days = $("#days"),
$hours = $("#hours"),
$minutes = $("#minutes"),
$seconds = $("#seconds");
var center = 0,
canvas = document.getElementById('timer'),
ctx = canvas.getContext("2d"),
daySetup = {
},
hourSetup = {
},
minSetup = {
},
secSetup = {
},
check = function(count, setup, ctx) {
if (count < setup.old){
setup.counter++
};
};
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
$days.text(days);
$hours.text(hours);
$minutes.text(minutes);
$seconds.text(seconds);
}, 1000);
};
/*======================================
= INIT FUNCTIONS =
======================================*/
$(document).ready(function() {
gamba.mainFunction();
gamba.event();
});
/*===== End of INIT FUNCTIONS ======*/
$(window).on('load', function() {
});
});
Turn anchor links into Smooth Scroll links by adding the [data-scroll] data attribute. Give the anchor location an ID just like you normally would.
<a data-scroll href="#bazinga">Anchor Link</a>
...
<span id="bazinga">Bazinga!</span>
En realidad es mucho mas sensillo, recorde que alguna vez utilice smoothscroll.js asi que busque la documentacion en github y basicamente lo que a vos te interesa es esto:
Dicho en criollo, busca en tu HTML seguramente tengas en algun elemento A algo llamado #about y ese deberias cambiarlo por Sobre-mi (o el que sea el nuevo nombre del id)
- - - Actualizado - - -
A ver si asi lo entendes un poco mejor:
Utilizo la misma web que pusiste vos en el topic
En el menu Contacto esta la etiqueta A con un Href="#contact" (esto quiere decir que cualquier click en ese elemento te va a redirigir a la seccion donde encuentre algun elemento con el ID="Contact")
Ver el archivo adjunto 94764
Elemento con ID que tambien hay que modificar
Ver el archivo adjunto 94765
Perdon si estan mal las fotos pero llevo muchas horas trabajando y leyendo codigo...encima en mi recreo me puse a hacer esto, asi que a imaginarse lo frito que tengo el cerebro
<script>$('a[href^="#"]').click(function(e){
var target = $(this).attr('href');
var strip = target.slice(1);
var ancla = $("a[name= '" + strip + "']");
e.preventDefault();
$('html, body').animate({
scrollTop: ancla.offset().top
}, 'slow');
});
</script>
(El valor slow es modificable en milisegundos a la velocidad que vos quieras)
ahhh perdon, estabaa muy quemado...ya vi que te lo habian puesto antes tambien...
Pregunta: si volves a poner el id normal, funciona o ya se rompio?
- - - Actualizado - - -
Bueno mira..mas facil que andar luchando con un plugin de alguien (que ademas tiene muchas funciones que no vas a utilizar y hace la carga de la web mas lenta) te dejo el script que uso yo para esto:
La etiqueta script va al final del body, abajo de Jquery
Etiqueta A del linkHTML:<script>$('a[href^="#"]').click(function(e){ var target = $(this).attr('href'); var strip = target.slice(1); var ancla = $("a[name= '" + strip + "']"); e.preventDefault(); $('html, body').animate({ scrollTop: ancla.offset().top }, 'slow'); }); </script> (El valor slow es modificable en milisegundos a la velocidad que vos quieras)
<a href="#4">Sobre mi</a>
Etiqueta A de donde queres que vaya el slide
<a href="#" name="4"></a>
Edit: Tambien si queres podes pegarlo dentro del functions.js o main.js o como se llame en tu web el archivo que pusiste arriba!
Claro!! Y lo que te dije si querés cambiar la velocidad podes sacar el slow y ponerlo en milidegundos... Por ejemplo 1.000 serían un segundo!
Enviado desde mi XT1063 mediante Tapatalk
Utilizamos cookies y tecnologías similares para los siguientes fines:
¿Aceptas las cookies y estas tecnologías?
Utilizamos cookies y tecnologías similares para los siguientes fines:
¿Aceptas las cookies y estas tecnologías?